一、效果图
二、文档
https://gitcode.com/gh_mirrors/aj/Ajax-Bootstrap-Select/tree/master
三、示例代码
引入插件js、css
<link rel="stylesheet" href="{php echo MODULE_URL}template/lib/bootstrap-select/css/bootstrap-select.min.css">
<link rel="stylesheet" href="{php echo MODULE_URL}template/lib/bootstrap-select/css/ajax-bootstrap-select.css">
require.config({paths: {// 指定插件的路径'bootstrap-select': '{php echo MODULE_URL}template/lib/bootstrap-select/js/bootstrap-select','ajax-bootstrap-select': '{php echo MODULE_URL}template/lib/bootstrap-select/js/ajax-bootstrap-select',},shim: {// 如果插件依赖于jQuery，可以这样配置'bootstrap-select': ['bootstrap'],}});
html
<div class="form-group"><label class="col-sm-1 control-label">所属学员 <span class="text-danger">*</span></label><div class="form-controls col-sm-9"><select name="student_id" id="student_id" class="form-control" data-live-search="true">{if $id ==0}<option value="">请选择学员</option>{else}<option value="{$field['student_id']}">{$field['name']} {$field['phone']}</option>{/if}</select><div class="help-block">请选择学员</div></div></div>
js
$("#student_id").selectpicker({liveSearch: true
}).ajaxSelectPicker({ajax: {url: "{php echo $this->createWeburl('student', array('op' => 'ajax'));}",data: function () {var params = {q: '{{{q}}}'};return params;}},locale: {emptyTitle: '搜索选择学员',searchPlaceholder: '请输入',statusNoResults: '没有结果',statusInitialized: '输入搜索查询',errorText: '没有搜索到内容',statusSearching: '搜索中...'},preprocessData: function(data){console.log(data);var student = [];var len = data.data.length;for(var i = 0; i < len; i++){var curr = data.data[i];student.push({'value': curr.id,'text': curr.name + ' ' + curr.phone,'data': {'icon': 'person-fill',},'disabled': false});}return student;},preserveSelected: false
});
)