boostrap插件---typeahead.js---输入提示下拉菜单

首先需要加载，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