bootstrap3-typeahead.min.js搜索框自动补全

需要引入bootstrap.js和css文件使用
在搜索框加入data-provide=“typeahead” autocomplete="off"这两个属性

<input type="text" value="" class="search-txt" placeholder="请输入产品名称或SKU" id="txtSkuName" data-provide="typeahead" autocomplete="off"/>

第一个是模拟数据，第二个是动态获取数据库的数据

//搜索框自动补全，模拟数据
 $(document).ready(function() {
             var dataSource = ['军工', '高校', '煤化工', '新能源', '节能环保', 'AB股', 'AH股', 'HS300'];
                $("#txtSkuName").typeahead({
                    source: dataSource, // 数据源
                    items: 8,           //最多显示个数
                    delay: 500,         //延迟时间
                    //这里一定要return，否则选中不显示，外加调用display的时候null reference错误。
                    updater: function (item) {    
                        return item;    
                    },
                    //返回选中的字符串
                    displayText: function (item) { 
                        return item;    
                    },
                    //选择项之后的事件，item是当前选中的选项
                    afterSelect: function (item) { 
                        console.log(item);
                    }
                });
             });


ajax动态获取数据，搜索框自动补全方法二
 $(document).ready(function() {
         var objects = {};
       $("#txtSkuName").typeahead({
             source: function(query, process) { //query是输入框输入的文本内容, process是一个回调函数
                 $.post("", {name: query}, function(data) {
                     if (data == "" || data.trim().length == 0) { console.log("没有查询到相关结果"); };
                     var results = [];
                     for (var i = 0; i < data.length; i++) {
                        objects[data[i].name] = data[i].id;
                        results.push(data[i].name);
                    }
                     process(results);
                 });
             },
             afterSelect: function (item) {       //选择项之后的事件，item是当前选中的选项
                 $("#hidden").val(objects[item]); //为隐藏输入框赋值
             },
         });
     });