使用 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 语句时加载下拉列表。我已经尝试使用以下代码来获取具有 select2 功能的 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

删除<select name="contact_source" id="contact_source" class="form-control select2 <?php echo form_error('contact_source') ? 'red' : '' ?>" required/>中的select2

同时删除$('#contact_source').on('click', function(e) {

我推荐jQuery Autocomplete。 https://jqueryui.com/autocomplete/#remote