如何在select 2 jquery中显示列表数据并查找数据

Posted

技术标签:

【中文标题】如何在select 2 jquery中显示列表数据并查找数据【英文标题】:how to display list data in select 2 jquery and find data 【发布时间】:2020-04-04 10:13:12 【问题描述】:

我有一个数据数组已经做成了json,然后我想在select中显示出来,然后我可以根据输入找到数据

这是我的控制器

$response = $this->GET(config('constant.url').'school-list');
return json_encode($response);

这是我的刀片视图

<div class="form-group">
  <label for="inputGrade">Select School</label>
  <select class="cari form-control" style="width:525px;" name="cari">
      <option value="disable"></option>
  </select>
</div>

$('.cari').select2(
        placeholder: 'Cari...',
        ajax: 
        url: '/select/school',
        dataType: 'json',
        delay: 250,
        data:function(param)
            return
                school_name:param.term
            
        ,
        processResults: function (data) 
            return 
                results: $.map(data, function (item) 
                    return 
                        school_name: item.school_name,
                        school_id: item.school_id
                    
                )
            ;
        ,
        cache: true
        
    )

这是我的 json


    "STATUS": 200,
    "MESSAGE": "SUCCESS",
    "DATA": [
        
            "school_id": 11,
            "school_name": "ACS Jakarta"
        ,
        
            "school_id": 13,
            "school_name": "Al Azhar 20"
        ,
        
            "school_id": 14,
            "school_name": "Al Azhar 23"
        ,
        
            "school_id": 15,
            "school_name": "Bangun Insan Mandiri"
        ,
        
            "school_id": 16,
            "school_name": "Bina Bangsa School Kebon Jeruk"
        ,
     ]

我已经尝试了几次,但我编码的数据列表不存在

【问题讨论】:

您想在选择下拉列表中显示此数据吗? 【参考方案1】:

processResults 函数中将school_name 更改为text 并将school_id 更改为id

processResults: function (data) 
  var response = JSON.parse(data);
    return 
        results: $.map(response.DATA, function (item) 
            return 
                text: item.school_name,
                id: item.school_id
            
        )
    ;
,

查看更详细的answer会帮助你。

【讨论】:

以上是关于如何在select 2 jquery中显示列表数据并查找数据的主要内容,如果未能解决你的问题,请参考以下文章

jquery Select2 Ajax - 如何设置值(initSelection)

jquery - 如何使用通过 AJAX 从 MySQL 和 PHP 检索的数据将图像添加到 Select2 下拉列表?

如何在JQuery数据库CellEdit上集成Select2插件?

如何从 JQuery 中的逗号分隔值列表中绑定 <select>?

jquery select2插件是否支持在下拉列表中使用其他行颜色?

如何在从数据库填充的 Jquery 下拉列表中显示选中的值