使用onclick AJAX调用加载Select2语句数据

Question

目前，我正在使用一个控制器来获取所有数据，并将其放置在视图类中的foreach语句中。因此，每当加载页面时，它都会执行此函数。为了实现这一点，我使用了如下方法：

控制器类：

$add['sources']= $this->contacts_model->get_array();

查看类别：

<select name="contact_source" id="contact_source" class="form-control select2 <?php echo form_error('contact_source') ? 'red' : '' ?>" required/>          
          <option value="">Select</option>
          <?php foreach($sources as $source): ?>
          <option value="<?php echo $source['id']; ?>" <?php echo ($this->input->post('contact_source') == $source['id'])?'selected="selected"':''?>><?php echo $source['title']; ?></option>
          <?php endforeach; ?>
   </select>

但是现在我希望页面加载得更快，因此只有当用户单击该特定的select2语句时，我才希望加载下拉列表。我尝试了以下代码来获取具有选择2功能的select2变量，即通过下拉列表获取输入文本，但都不起作用。它只是在我的页面加载时打开一个正常的下拉列表。

查看类别：

<select name="contact_source" id="contact_source" class="form-control select2 <?php echo form_error('contact_source') ? 'red' : '' ?>" required/>          
              <option value="">Select</option>
              <?php foreach($sources as $source): ?>
              <option value="<?php echo $source['id']; ?>" <?php echo ($this->input->post('contact_source') == $source['id'])?'selected="selected"':''?>><?php echo $source['title']; ?></option>
              <?php endforeach; ?>
</select>

$(document).ready(function(){
  $('#contact_source').on('click', function(e) {
    $("#contact_source").select2({
      minimumInputLength: 2,
      tags: [],
      ajax: {
          url: "<?php echo site_url('contacts/add'); ?>/",
          dataType: 'json',
          type: "GET",
          delay : 50,
          data: function (data) {
              return {
                sources: data.sources
              };
          },
          results: function (data) {
              return {
                  results: $.map(data, function (item) {
                      return {
                          text: item.sources,
                          id: item.id
                      }
                  })
              };
          }
      }
  });
})
});

Answer 1

在<代码>

并删除（“#contact\u source”）。在（'click'，函数（e）{

我建议您使用jQuery自动完成。https://jqueryui.com/autocomplete/#remote