首先需要加载，jquery，bootstrap.js，typeahead.js

 

<input id="typea" type="text" data-provide="typeahead" autocomplete="off">

 

autocomplete="off"以阻止浏览器的默认提示菜单遮盖Bootstrap的输入提示下拉菜单。

 

$('#typea').typeahead(options)    初始化提示功能

 

source　　　　array,function　　　　用于查询的数据源，函数接受两个参数，输入的query，process回调函数

items　　　　number　　　　8　　　　下拉菜单中显示的最大条目数

minLength　　　　number　　　　触发所需的最小字符个数

mather　　　　function　　　　case insensitive　　　　某个查询是否符合某个条目，

sorter　　　　function　　　　排序提示项

updater　　　　function　　　　返回选中得条目

highlighter　　　　function  　　　　高亮自动完成的结果

 

 

<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />

 

var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];

$('#search').typeahead({source: subjects})

 

$('#search').typeahead({      ajax: {        url: "v2/enterprise/searchListPaging.do",        timeout: 0,         //指定等待键盘输入停止的时间量，直到将查询发送到服务器为止。默认值为300毫秒。        triggerLength: 1,   //这是要采取行动的文本的最小长度。默认值为1。        crossDomain: true,        method: "post",        jsonp: 'callback',        preDispatch: function (query) {          return {            keyword: query,            skip: 0          }        },        preProcess: function (res) {          if(res.status != '200'){            return false;          }          return res.data.items;        }      },      scrollBar: true,      items: 100    })

 

 

$('#search').typeahead({            source: function(query,process){        var parameter = {          keyword: query,          skip: 0        };        $.post('/enterprise/searchListPaging.do', parameter, function (data) {          console.log(data)          var arr = [];          data.data.items.forEach(item => {            arr.push(item.name)          })            process(arr);        });        // $.ajax({
            //     url: 'v2/enterprise/searchListPaging.do',        //     type: 'post',        //     crossDomain: true,        //     // dataType: "jsonp",        //     jsonp: 'callback',        //     data: {
            //         keyword: query,        //         skip: 0        //     },        //     success: function (res) {
            //       process([1,2,3])        //       console.log('aaa',res.data.items);        //       //   var data = res.data.items;        //       //   if (data != undefined) {
            //       //       var li_str = '';        //       //       $(data).each(function (index, item) {
            //       //           li_str += '
' + item.name + '
';        //       //       });        //       //       $('.company-list').show().find('ul').html(li_str);        //       //   }        //     },        //     error(res) {
            //         console.log('error',res);        //     }        // })      },      scrollBar: true,      scrollHeight: '200'    })

 

 

 

 

 

 

 

typeahead下载地址：

参考地址：