select2之 下拉框带实时搜索功能

参考
https://blog.csdn.net/qq_42622871/article/details/131450260

引入 select2.css
select2.js

如报错 select2 is not a function 需检查 js 和select.js 引入的先后顺序

页面

<div class="am-form-group">
    <label>品牌</label>
     <br />
         <select class="singleSelect" id="buyerName" name="brand_id" style="width: 300px;">
              <option value="">--请选择品牌--</option>
                 {{if !empty($brand_list)}}
                 <option value="0">请选择...</option>
                 {{foreach $brand_list as $v}}
                 <option value="{{$v.id}}" {{if isset($data['brand_id']) and $data['brand_id'] eq $v['id']}}selected{{/if}}>{{$v.name}}</option>
                 {{/foreach}}
                 {{/if}}
         </select>
</div>

<script>
$(document).ready(function() {

    $("#buyerName").select2({  // 实时搜索
        placeholder: "请选择品牌",
        ajax: {
            url:"{{:MyUrl('admin/goods/getBrand')}}",
            dataType: "json",
            delay: 250,
            data: function(params) {
                return {
                    keywords: params.term, // 输入框中的值
                    status : {{$status}}
                };
            },
            processResults: function(data) {
console.log('select2搜索品牌返回');
console.log(data);
                var results = [];

                // 根据返回的数据生成选项
                for (var i = 0; i < data.length; i++) {
                    var option = {
                        id: data[i].id, // 选项的值
                        text: data[i].name // 选项的显示文本
                    };
                    results.push(option);
                }
                return {
                    results: results
                };
            },
            cache: true
        },
        minimumInputLength: 1 // 输入的最小长度，可以根据需要进行调整
    });

    $("#buyerName").on("select2:select", function(e) {   // 点击选中值后
        var selectedOption = e.params.data;
        console.log('打印select2:select');
        console.log(selectedOption);
    });
});
</script>