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

本文主要是介绍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>

这篇关于select2之 下拉框带实时搜索功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---