Bootstrap 的 Typeahead 插件是个自动补全功能插件，类似于JQuery UI Autocomplete 插件。功能很强大，但是，早期的版本问题很多，使用很不方便。建议大家下载最新的修订版本。
下载地址：https://github.com/tcrosen/twitter-bootstrap-typeahead
使用上很简单， 主要的设置就是数据源(source)，即搜索的源数据。
第一，使用简单的对象数组
使用$('选择器').typeahead(...)方法来创建插件，方法内需要传入一个参数对象。通常情况下，只需要设置source参数即可：
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap-typeahead.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').typeahead({
source: [
{ id: 1, name: 'Toronto' },
{ id: 2, name: 'Montreal' },
{ id: 3, name: 'New York' },
{ id: 4, name: 'Buffalo' },
{ id: 5, name: 'Boston' },
{ id: 6, name: 'Columbus' },
{ id: 7, name: 'Dallas' },
{ id: 8, name: 'Vancouver' },
{ id: 9, name: 'Seattle' },
{ id: 10, name: 'Los Angeles' }
]
});
})
</script>
</head>
<body>
<h3 style="display:inline-block;">搜索:</h3><input id="demo1" type="text"/>
</body>
</html>
默认情况下会自动使用name属性值，当然我们也可以通过display参数来主动设置：
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap-typeahead.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').typeahead({
source: [
{ name: 'Toronto' ,address:'北京' },
{ name: 'Montreal' ,address:'上海' },
{ name: 'New York',address:'广州' },
{ name: 'Buffalo' ,address:'深圳' },
{ name: 'Boston' ,address:'南京' },
{ name: 'Columbus' ,address:'福建' },
{ name: 'Dallas' ,address:'重庆' },
{ name: 'Vancouver' ,address:'天津' },
{ name: 'Seattle' ,address:'北京' },
{ name: 'Los Angeles' ,address:'北京' }
],
display: 'address'
});
})
</script>
</head>
<body>
<h3 style="display:inline-block;">搜索:</h3><input id="demo1" type="text"/>
</body>
</html>
第二，使用source 函数(适用于旧版中)
使用source函数我们可以动态的生成源数据，尤其是获取远端的数据源。
这个函数接收两个参数，第一个参数 query 表示用户的输入，第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，通过它可以将动态生成的数据传给typeahead 。
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap-typeahead.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').typeahead({
source:function(query, process){
$.ajax({
url: '/typeahead/sources',
type: 'get',
dataType: 'json',
async: true,
success: function(data){
process(data);
}
});
}
});
})
</script>
</head>
<body>
<h3 style="display:inline-block;">搜索:</h3><input id="demo1" type="text"/>
</body>
</html>
服务器端：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("[");
out.println("\"Toronto\", \"Seattle\" ");
out.println("]");
out.flush();
out.close();
}
简单的写了个servlet(因为我是做java的)。 注意这里返回的不能是对象数组，只能是字符串数组。
注：由于在新版中专门提供了ajax的支持，所以此方法不能使用了， 这里只是说明下对于旧版的使用。
第三，Ajax 获取数据
这是修订版中新增的支持，这样我们就不用再手写获取数据源的代码，只需设置到相应的参数即可：
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap-typeahead.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').typeahead({
ajax: {
url: '/typeahead/sources',
triggerLength: 1,
method: 'post',
preProcess: function(data) { // 必需的， 功能类似于process()方法
//将json字符串转为json对象
return $.parseJSON(data);
}
}
});
})
</script>
</head>
<body>
<h3 style="display:inline-block;">搜索:</h3><input id="demo1" type="text"/>
</body>
</html>
其中triggerLength参数设置搜索框触发的字符数， 默认为3.
服务器端：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("[");
out.println("{ \"id\": 1, \"name\": \"Toronto\" },");
out.println("{ \"id\": 9, \"name\": \"Seattle\" }");
out.println("]");
out.flush();
out.close();
}
有一点需要注意，高版本的jquery(1.5还是1.6我记不清了)对json的格式严格限制， 所以返回的json对象的属性必须是双引号，不能是单引号。
highlighter的使用
使用highlighter 函数可以对匹配的项目进行二次处理，生成符合需要的值。
以下是typeahead的默认实现，item 是匹配的项目，找到匹配的部分之后，使用 <strong> 加粗了。
highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>';
});
},
我们可以对这个函数进行重写：
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap-typeahead.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').typeahead({
source: [
{ id: 1, name: 'Toronto' },
{ id: 2, name: 'Montreal' },
{ id: 3, name: 'New York' },
{ id: 4, name: 'Buffalo' },
{ id: 5, name: 'Boston' },
{ id: 6, name: 'Columbus' },
{ id: 7, name: 'Dallas' },
{ id: 8, name: 'Vancouver' },
{ id: 9, name: 'Seattle' },
{ id: 10, name: 'Los Angeles' }
],
highlighter: function (item) {
return '<strong>----' + item + '----</strong>'
}
});
})
</script>
</head>
<body>
<h3 style="display:inline-block;">搜索:</h3><input id="demo1" type="text"/>
</body>
</html>
