Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete，类似百度、谷歌等搜索提示；输入关键词出现相应的下拉列表数据。
是Bootstrap-3-Typeahead，不是Twitter open source的typeahead，两者用法有差异。外加如果配合原生的Bootstrap3 的话推荐还是用这个。（当然Twitter open source也有个bootstrap）。
1、基于Bootstrap v3 版本的 typeahead
第一，简单使用：
首先，最简单的使用方式，就是直接在标记中声明，通过 data-provide="typeahead" 来声明这是一个 typeahead 组件，通过 data-source= 来提供数据。当然了，你还必须提供 bootstrap-typeahead.js 脚本。
<html> <head> <meta charset="utf-8"/> <link href="./bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <form id="searchform" class="navbar-form navbar-left" role="search" target="_blank" method="get" action=""> <div class="form-group"> <!--第一种方法--> <input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'> </div> <button type="submit" class="btn" id="searchbtn">搜索</button> </form> </body> </html>
第二，支持 Ajax 获取数据
注意，我们提供了一个 source 函数来提供数据，这个函数接收两个参数，第一个参数 query 表示用户的输入，第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，用来处理我们的数据。
如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，你需要获取一个匹配的字符串数组，然后，将这个数组作为参数，调用 process 函数。
<html> <head> <meta charset="utf-8"/> <link href="./bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <form id="searchform" class="navbar-form navbar-left" role="search" target="_blank" method="get" action=""> <div class="form-group"> <!--第一种方法--> <!--<input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>--> <input type="text" id="product_search" name="keys" class="form-control" data-provide="typeahead" data-value="" autocomplete="off" placeholder="请输入要搜索关键词"> </div> <button type="submit" class="btn" id="searchbtn">搜索</button> </form> <script> /***第二种方法****************************************/ console.log("欢迎使用typeahead"); /***第一种形式******返回json串***********************/ $('#product_search').typeahead({ source: function (query, process) { return $.ajax({ url: './server.php', type: 'post', data: { query: query }, dataType: 'json', success: function (result) { var resultList = result.map(function (item) { var aItem = { id: item.id, name: item.name }; return JSON.stringify(aItem); }); return process(resultList); } }); }, matcher: function (obj) { var item = JSON.parse(obj); return ~item.name.toLowerCase().indexOf(this.query.toLowerCase()) }, sorter: function (items) { var beginswith = [], caseSensitive = [], caseInsensitive = [], item; while (aItem = items.shift()) { var item = JSON.parse(aItem); if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item)); else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item)); else caseInsensitive.push(JSON.stringify(item)); } return beginswith.concat(caseSensitive, caseInsensitive) }, highlighter: function (obj) { var item = JSON.parse(obj); var query = this.query.replace(/[-[]{}()*+?.,\^$|#s]/g, '\$&') return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { return '<strong style="font-size:16px;">' + match + '</strong>' }) }, updater: function (obj) { var item = JSON.parse(obj); $('#product_search').attr('data-value', item.id); return item.name; }, delay:500, minLength:1, items: 10, //显示10条 delay: 0, //延迟时间 }); /**第二种形式*****返回json串**********************************/ jQuery('#product_search').typeahead({ source: function (query, process) { //query是输入值 jQuery.getJSON('./server.php', { "query": query }, function (data) { process(data); }); }, highlighter: function (item) { var query = this.query.replace(/[-[]{}()*+?.,\^$|#s]/g, '\$&') return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { return '<strong style="font-size:16px;">' + match + '</strong>' }) }, updater: function (item) { return item }, afterSelect: function (item) { //选择项之后的时间，item是当前选中的项 $("#product_search").attr("data-value",item.id); }, delay:500, minLength:1, items: 10, //显示10条 delay: 0, //延迟时间 }); </script> </body> </html>
服务器处理文件 server.php
<?php //1、 先获取当前搜索词"query" //2、 从数据库中查询此字段的热词集合 //3、 从数据库中检索出包含此搜索词的热词集合，并按搜索次数排序,将数据返回给typeahead.js if(!empty($_GET)){ $data = array(); $data[0]['id'] = 0; $data[0]['name'] = "aaaaa"; $data[1]['id'] = 1; $data[1]['name'] = "aaaaabbbbbb"; $data[2]['id'] = 2; $data[2]['name'] = "aaaaaabbbbbccccc"; }else{ $data = array(); $data[0]['id'] = 0; $data[0]['name'] = "baidu"; $data[1]['id'] = 1; $data[1]['name'] = "baidu2"; $data[2]['id'] = 2; $data[2]['name'] = "baidu3"; } echo json_encode($data);die;
文件链接及打包地址：
ajax两种形式都支持：
ajax只支持第二种形式的 typeahead组件：
或 https://www.twitterbootstrapmvc.com/Documentation#typeahead 该 bootstrap.typeahead.min.js
demo打包地址：链接：http://pan.baidu.com/s/1geQ0DVX 密码：83vn
参考资料： 使用 Bootstrap Typeahead 组件 - 冠军 - 博客园
Bootstrap typeahead使用问题记录及解决方案
Bootstrap typeahead ajax result format - Example [结果格式的例子引导Typeahead Ajax] - 问题-字节技术
2、Twitter typeahead+bootstrap 官网用法：
typeahead的官方主页：http://twitter.github.io/typeahead.js/
typeahead的官方Example：http://twitter.github.io/typeahead.js/examples/
参考资料： 使用bootstrap typeahead插件