使用升級版的 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);

事件

事件	說明
grepper	Filters relevant results from the source.
highlighter	Highlights any matching results in the list.
itemSelected	當選中一個項目時的回調函數. item: 選中的 HTML 元素 val: *val* 屬性的值 text: *display* 屬性的值
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	{ 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)
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());

            }
        });
    });