首先需要載入，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 += '<li>' + item.name + '</li>';
        //       //       });
        //       //       $('.company-list').show().find('ul').html(li_str);
        //       //   }
        //     },
        //     error(res) {
        //         console.log('error',res);
        //     }
        // })
      },
      scrollBar: true,
      scrollHeight: '200'
    })

 

 

 

 

 

 

 

typeahead下載地址：https://v2.bootcss.com/assets/js/bootstrap-typeahead.js

參考地址：https://github.com/biggora/bootstrap-ajax-typeahead