使用升级版的 Bootstrap typeahead v1.2.2

上次介绍了 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);

事件

事件说明grepperFilters relevant results from the source.highlighterHighlights any matching results in the list.itemSelected当选中一个项目时的回调函数.

• item: 选中的 HTML 元素
• val: *val* 属性的值
• text: *display* 属性的值

lookupDetermines if source is remote or local and initializes the search.matcherLooks for a match between the query and a source item.renderRenders the list of results.selectSelects an item from the results list.sorter排序结果.

初始化参数

名称类型默认值说明ajaxobject

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

The object required to use a remote datasource. 
See also: ajax as a string (below)ajaxstringnullOptionally, a simple URL may be used instead of the AJAX object. 
See also: ajax as an object (above)displaystring'name'The object property to match the query against and highlight in the results.itemstring'<li><a href="#"></a></li>'The HTML rendering for a result item.itemsinteger8The maximum number of items to show in the results.menustring'<ul class="typeahead dropdown-menu"></ul>'The HTML rendering for the results list.sourceobject[]The source to search against.valstring'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());            }        });    });