bootstrap suggest 输入框下拉提示

例子1

例子2

插件地址：bootstrap-suggest

不过里面有个小问题，下面属性如果用auto的话，会有点问题，目前还是用默认的left

  listAlign: 'auto', //auto的话，下拉框的选中会有问题

思路就是从后台先把所有的数据查出来，在初始化页面的时候渲染，然后就用这个插件提示出来

导入包：

除了suggest的包，还有jquery的，别忘了

    <script src="../js/bootstrap-suggest/bootstrap-suggest.js"></script>

html

<!-- 下拉框提示 -->
<div class="form-group">
    <div class="input-group">
        <input id="keyWord" name="keyWord" type="text" class="form-control no-padding" style="width: 400px" placeholder="请输入名称">
        <div class="input-group-btn" style="width:0">
            <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
        </div>
    </div>
    <button id="btnSearch" type="button" class="btn btn-default" style="margin-left:20px;margin-bottom: 20px">搜 索</button>
</div>

js:

  /**
         *  下拉框
         */
        (function() {
            var dataList = {
                value : []
            };
            init(dataList);
            console.info(dataList);
            suggest("keyWord", dataList);
            //请求json格式的数据 {value: [key:value,key2:value2]};
            function init(dataList) {
                $.ajax({
                    type : 'get',
                    async : false,
                    url : '/user/list ',
                    success : function(result) {
                        var data = result['data'];
                        for (var i = 0; i < data.length; i++) {
                            var obj = {};
                            obj.name = data[i].name;
                            dataList.value.push(obj);
                        }
                    }
                });
                return dataList;
            }
            // 插件绑定事件
            function suggest(domID, dataList) {
                $("#" + domID).bsSuggest({
                    indexId : 1, // data.value 的第几个数据，作为input输入框的显示的内容
                    // indexKey: 2, //data.value 的第几个数据，作为input输入框的内容
                    data : dataList,
                    listAlign: 'auto',
                    listStyle: {
                        'padding-top': 0, 'max-height': '375px', 'max-width': '400px',
                        'overflow': 'auto', 'width': '400px',
                        'transition': '0.3s', '-webkit-transition': '0.3s', '-moz-transition': '0.3s', '-o-transition': '0.3s'
                    }
                }).on('onDataRequestSuccess', function(e, result) {
                    console.log('从 json参数中获取，不会触发 onDataRequestSuccess 事件', result);
                }).on('onSetSelectValue', function(e, keyword, data) {
                    console.log('onSetSelectValue: ', keyword, data);
                }).on('onUnsetSelectValue', function() {
                    console.log("onUnsetSelectValue");
                });
            }
        }());