上次介绍了 Bootstrap 2 中附带的 typeahead，功能强大，但是使用起来不太方便，作者 Terry Rosen 已经升级了一个新版本 v1.2.2，作出了很大的改进。
下载地址
https://github.com/tcrosen/twitter-bootstrap-typeahead
使用环境
- Twitter Bootstrap 2.0+
- jQuery 1.7+
页面准备
<link href="/path/to/bootstrap.css" rel="stylesheet">
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/bootstrap-typeahead.js" type="text/javascript"></script>
脚本
$(myElement).typeahead(options);
事件
| 事件 | 说明 |
|---|---|
| grepper | Filters relevant results from the source. |
| highlighter | Highlights any matching results in the list. |
| itemSelected | 当选中一个项目时的回调函数.
|
| lookup | Determines if source is remote or local and initializes the search. |
| matcher | Looks for a match between the query and a source item. |
| render | Renders the list of results. |
| select | Selects an item from the results list. |
| sorter | 排序结果. |
初始化参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| ajax | object |
{
|
The object required to use a remote datasource. See also: ajax as a string (below) |
| ajax | string | null |
Optionally, a simple URL may be used instead of the AJAX object. See also: ajax as an object (above) |
| display | string | 'name' | The object property to match the query against and highlight in the results. |
| item | string | '<li><a href="#"></a></li>' | The HTML rendering for a result item. |
| items | integer | 8 | The maximum number of items to show in the results. |
| menu | string | '<ul class="typeahead dropdown-menu"></ul>' | The HTML rendering for the results list. |
| source | object | [] | The source to search against. |
| val | string | 'id' | The object property that is returned when an item is selected. |
基本使用
如果使用本地数据的话直接使用 source
var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];
$('#myElement').typeahead({
source: mySource
});
如果使用 Ajax 的话，可以直接指定 url，注意，现在的版本要求必须使用对象形式的数据源，默认显示文本为对象的 name 属性，可以通过初始化参数的 display 配置，默认的标识属性为 id ，可以使用 val 进行配置。
$('#myElement').typeahead({
ajax: '/path/to/mySource'
});
使用 Ajax
$(function () {
$('#product_search').typeahead({
ajax: {
url: '@Url.Action("AjaxService")',
timeout: 300, // 延时
method: 'post',
triggerLength: 3, // 输入几个字符之后，开始请求
loadingClass: null, // 加载数据时, 元素使用的样式类
preDispatch: null, // 发出请求之前，调用的预处理方法
preProcess: null // Ajax 请求完成之后，调用的后处理方法
},
display: "name", // 默认的对象属性名称为 name 属性
val: "id", // 默认的标识属性名称为 id 属性
items: 8, // 最多显示项目数量
itemSelected: function (item, val, text) { // 当选中一个项目的时候，回调函数
console.info(item);
}
});
});
如果我们需要在请求中，除了递进搜索的参数之外，添加额外的请求参数怎么办呢，可以通过 preDispatch 进行额外处理，需要注意的是，一定要返回一个对象，这个对象将用来使用 jQuery 的 Ajax 方法作为参数。
$(function () {
$('#product_search').typeahead({
ajax: {
url: '@Url.Action("AjaxService")',
timeout: 300, // 延时
method: 'post',
triggerLength: 3, // 输入几个字符之后，开始请求
loadingClass: null, //
preDispatch: function (query) {
var para = { other: 'xxxxxxxxx' };
para.query = query;
return para;
},
preProcess: function (result) {
return result;
}
},
display: "name", // 默认的对象属性名称为 name 属性
val: "id", // 默认的标识属性名称为 id 属性
items: 8, // 最多显示项目数量
itemSelected: function (item, val, text) { // 当选中一个项目的时候，回调函数
console.info(item);
// console.info($("#product_search").val());
}
});
});