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