一、效果圖
二、文檔
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
});
)