bootstrap 自动补全插件 suggest

suggest是一款输入框下拉提示的插件，能实现的效果是根据输入的内容筛选下拉选项，获得更好的下拉选择体验。

参考资料:

项目地址

bootstrap suggest搜索建议插件

主要逻辑：获得数据源，根据数据源赋值下拉框，根据输入框内容筛选下拉框，选中前后的操作

eg:

页面

<p>替换物料：</p>
<div class="input-group">
    <input type="text" class="form-control" id="targetMaterialsName" name="targetMaterialsName">
    <div class="input-group-btn">
        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" style="padding-bottom: 2px">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
    </div>
</div>

js：先获取数据源（下拉列表），再使用插件

function selectMaterial() {
        var materialsCategoryId = $.form.selectSelects('materialsCategoryId');
        $.ajax({
            type: "POST",
            url: prefix + "/xxxx",
            data: {materialsCategoryId: materialsCategoryId},
            dataType: 'json',
            sync: true,
            error: function (request) {
                $.modal.alertError("查询物料失败！");
            },
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    allMaterialsList.value = result.data;
                    // 由于这里数据源会根据另一个input的值的变化而变化，所以每次调用前
                     // 要销毁，这样数据源才会变化
                    $("#targetMaterialsName").bsSuggest('destroy');
                    $("#targetMaterialsName")
                        .bsSuggest({
                            indexId: 1, //data.value 的第几个数据，作为input输入框的内容
                            indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
                            data: allMaterialsList,
                            inputWarnColor: 'rgba(255,0,0,.1)'
                        })
                        .on("onDataRequestSuccess", function (e, result) {
                            console.log(
                                "从 json.data 参数中获取，不会触发 onDataRequestSuccess 事件",
                                result
                            );
                        })
                        .on("onSetSelectValue", function (e, keyword, data) {
                            // 选中后的操作
                            $('#targetMaterialsCode').val(data.materialsCode)
                        })
                        .on("onUnsetSelectValue", function () {
                        });
                } else {
                    return layer.alert("查询物料失败！", {icon: 2});
                }
            }
        })
    }

js：从url获取数据源（下拉列表），再使用插件

$("#customLabelName").bsSuggest({
            url: prefix + "/xxxxx/" + dept,
            showBtn: false,
            idField: "id",
            keyField: "name"
        }).on('onSetSelectValue', function (e, keyword) {
            $("#xxxxId").val(keyword.id);
            var data = eachLabels(keyword.id);
            $("#xxxxMsg").val(data.msg);
        })

更多详细用法，可参考 demo/index.html 和 demo/demo.js 文件源代码，提供了自定义数据、URL 请求数据、百度搜索 API、淘宝搜索 API 的接口演示。