上次介绍了 Bootstrap 2 中附带的 typeahead，功能强大，但是使用起来不太方便，作者 Terry Rosen 已经升级了一个新版本 v1.2.2，作出了很大的改进。 下载地址 https://github.com/tcrosen/-bootstrap-typeahead 使用环境 Twitter Bootstrap 2.0 jQue

上次介绍了 Bootstrap 2 中附带的 typeahead，功能强大，但是使用起来不太方便，作者 Terry Rosen 已经升级了一个新版本 v1.2.2，作出了很大的改进。

下载地址

https://github.com/tcrosen/-bootstrap-typeahead

使用环境

页面准备

脚本

$(myElement).typeahead(options);

事件

初始化参数

{
 url: null,
 timeout: 300,
 method: 'post',
 triggerLength: 3,
 loadingClass: null,
 displayField: null,
 preDispatch: null,
 preProcess: null
}

基本使用

如果使用本地数据的话直接使用 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());

 }
 });
 });