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

Question

目前我正在使用控制器来获取我的所有数据并将其放在我视图中的 foreach 语句中 class。因此，无论何时加载页面，它都会执行此函数。为了实现这一点，我使用了这样的东西：

控制器Class:

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

查看class:

<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 变量，该功能通过下拉菜单获取输入文本，但其中 none 有效。它只会在我的页面加载时显示一个正常的下拉菜单。

查看Class:

<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

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

Loading Select2 statement data with onclick AJAX call

php

ajax

jquery

codeigniter

jquery-select2