使用升級(jí)版的Bootstraptypeaheadv1.2.2

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-09 07:43:03

使用升級(jí)版的Bootstraptypeaheadv1.2.2

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

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

上次介紹了 Bootstrap 2 中附帶的 typeahead，功能強(qiáng)大，但是使用起來(lái)不太方便，作者 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)大，但是使用起來(lái)不太方便，作者 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+

頁(yè)面準(zhǔn)備

腳本

$(myElement).typeahead(options);

事件

事件	說(shuō)明
grepper	Filters relevant results from the source.
highlighter	Highlights any matching results in the list.
itemSelected	當(dāng)選中一個(gè)項(xiàng)目時(shí)的回調(diào)函數(shù). 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	排序結(jié)果.

初始化參數(shù)

名稱	類型	默認(rèn)值	說(shuō)明
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	' '	The HTML rendering for a result item.
items	integer	8	The maximum number of items to show in the results.
menu	string	''	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.

基本使用

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

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

$('#myElement').typeahead({
 source: mySource
});

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

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

使用 Ajax

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

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

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

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

 }
 });
 });

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com