上次介紹了 Bootstrap 2 中附帶的 typeahead，功能強(qiáng)大，但是使用起來不太方便，作者 Terry Rosen 已經(jīng)升級(jí)了一個(gè)新版本 v1.2.2，作出了很大的改進(jìn)。 下載地址 https://github.com/tcrosen/twitter-bootstrap-typeahead 使用環(huán)境 Twitter Bootstrap 2.0 jQue

上次介紹了 Bootstrap 2 中附帶的 typeahead，功能強(qiáng)大，但是使用起來不太方便，作者 Terry Rosen 已經(jīng)升級(jí)了一個(gè)新版本 v1.2.2，作出了很大的改進(jìn)。

下載地址

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

使用環(huán)境

• Twitter Bootstrap 2.0+
• jQuery 1.7+

頁面準(zhǔn)備

<span><span>link </span><span>href</span><span>="/path/to/bootstrap.css"</span><span> rel</span><span>="stylesheet"</span><span>></span>
<span><span>script </span><span>src</span><span>="/path/to/jquery.js"</span><span> type</span><span>="text/javascript"</span><span>></span><span>script</span><span>></span>
<span><span>script </span><span>src</span><span>="/path/to/bootstrap-typeahead.js"</span><span> type</span><span>="text/javascript"</span><span>></span><span>script</span><span>></span></span></span></span>

腳本

$(myElement).typeahead(options);

事件

初始化參數(shù)

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

基本使用

如果使用本地?cái)?shù)據(jù)的話直接使用 source

<span>var</span> mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'<span>}];

$(</span>'#myElement'<span>).typeahead({
    source: mySource
});</span>

如果使用 Ajax 的話，可以直接指定 url，注意，現(xiàn)在的版本要求必須使用對(duì)象形式的數(shù)據(jù)源，默認(rèn)顯示文本為對(duì)象的 name 屬性，可以通過初始化參數(shù)的 display 配置，默認(rèn)的標(biāo)識(shí)屬性為 id ，可以使用 val 進(jìn)行配置。

$('#myElement'<span>).typeahead({
    ajax: </span>'/path/to/mySource'<span>
});</span>

?

使用 Ajax

$(<span>function</span><span> () {
    $(</span>'#product_search'<span>).typeahead({
        ajax: {
            url: </span>'@Url.Action("AjaxService")'<span>,
            timeout: </span>300,                   <span>//</span><span> 延時(shí)</span>
            method: 'post'<span>,
            triggerLength: </span>3,               <span>//</span><span> 輸入幾個(gè)字符之后，開始請(qǐng)求</span>
            loadingClass: <span>null</span>,             <span>//</span> 加載數(shù)據(jù)時(shí), 元素使用的樣式類<span>
            preDispatch: </span><span>null</span><span>,　　　　　　　　// 發(fā)出請(qǐng)求之前，調(diào)用的預(yù)處理方法
            preProcess: </span><span>null　　　　　　　　　// Ajax 請(qǐng)求完成之后，調(diào)用的后處理方法</span><span>
        },
        display: </span>"name",     <span>//</span><span> 默認(rèn)的對(duì)象屬性名稱為 name 屬性</span>
        val: "id",           <span>//</span><span> 默認(rèn)的標(biāo)識(shí)屬性名稱為 id 屬性</span>
        items: 8,            <span>//</span><span> 最多顯示項(xiàng)目數(shù)量</span>
        itemSelected: <span>function</span> (item, val, text) {      <span>//</span><span> 當(dāng)選中一個(gè)項(xiàng)目的時(shí)候，回調(diào)函數(shù)</span>
<span>            console.info(item);
        }
    });
});</span>

?如果我們需要在請(qǐng)求中，除了遞進(jìn)搜索的參數(shù)之外，添加額外的請(qǐng)求參數(shù)怎么辦呢，可以通過 preDispatch 進(jìn)行額外處理，需要注意的是，一定要返回一個(gè)對(duì)象，這個(gè)對(duì)象將用來使用 jQuery 的 Ajax 方法作為參數(shù)。

 $(<span>function</span><span> () {
        $(</span>'#product_search'<span>).typeahead({
            ajax: {
                url: </span>'@Url.Action("AjaxService")'<span>,
                timeout: </span>300,                   <span>//</span><span> 延時(shí)</span>
                method: 'post'<span>,
                triggerLength: </span>3,               <span>//</span><span> 輸入幾個(gè)字符之后，開始請(qǐng)求</span>
                loadingClass: <span>null</span>,             <span>//
</span>                preDispatch: <span>function</span><span> (query) {
                    </span><span>var</span> para = { other: 'xxxxxxxxx'<span> };
                    para.query </span>=<span> query;
                    </span><span>return</span><span> para;
                },

                preProcess: </span><span>function</span><span> (result) {
                    </span><span>return</span><span> result;
                }
            },
            display: </span>"name",     <span>//</span><span> 默認(rèn)的對(duì)象屬性名稱為 name 屬性</span>
            val: "id",           <span>//</span><span> 默認(rèn)的標(biāo)識(shí)屬性名稱為 id 屬性</span>
            items: 8,            <span>//</span><span> 最多顯示項(xiàng)目數(shù)量</span>
            itemSelected: <span>function</span> (item, val, text) {      <span>//</span><span> 當(dāng)選中一個(gè)項(xiàng)目的時(shí)候，回調(diào)函數(shù)</span>
<span>                console.info(item);
                </span><span>//</span><span> console.info($("#product_search").val());</span>
<span>
            }
        });
    });</span>