时间戳

首页 > 解决方案 > 使用 onclick AJAX 调用加载 Select2 语句数据

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

问题描述

目前我正在使用控制器来获取我的所有数据并将其放在我的视图类中的 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 变量，并使用 select 2 功能来获取带有下拉列表的输入文本，但它们都不起作用。它只是调出一个在我的页面加载时加载的正常下拉列表。

查看类：

<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
                      }
                  })
              };
          }
      }
  });
})
});

标签： phpjqueryajaxcodeigniterjquery-select2

解决方案

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

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

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

推荐阅读