Js 之点击下拉搜索Ajax-Bootstrap-Select

一、效果图

二、文档

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
});