Bootstrap 中的 Typeahead 組件就是通常所說的自動完成 AutoComplete,功能很強(qiáng)大,但是,使用上并不太方便。這里我們將介紹一下這個組件的使用。
第一,簡單使用
首先,最簡單的使用方式,就是直接在標(biāo)記中聲明,通過 data-provide="typeahead" 來聲明這是一個 typeahead 組件,通過 data-source= 來提供數(shù)據(jù)。當(dāng)然了,你還必須提供 bootstrap-typeahead.js 腳本。
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead"
data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>
第二,使用腳本填充數(shù)據(jù)
通常,我們使用腳本來填充數(shù)據(jù),那么,頁面可以變成如下的形式。
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead">
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
$(document).ready(function($) {
// Workaround for bug in mouse item selection
$.fn.typeahead.Constructor.prototype.blur = function() {
var that = this;
setTimeout(function () { that.hide() }, 250);
};
$('#product_search').typeahead({
source: function(query, process) {
return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
}
});
})
</script>
</body>
</html>
注意,我們提供了一個 source 函數(shù)來提供數(shù)據(jù),這個函數(shù)接收兩個參數(shù),第一個參數(shù) query 表示用戶的輸入,第二個參數(shù)是 process 函數(shù),這個 process 函數(shù)是 typeahead 提供的,用來處理我們的數(shù)據(jù)。
如果你希望通過 Ajax 調(diào)用從服務(wù)器端獲取匹配的數(shù)據(jù),那么,在異步完成的處理函數(shù)中,你需要獲取一個匹配的字符串?dāng)?shù)組,然后,將這個數(shù)組作為參數(shù),調(diào)用 process 函數(shù)。
第三,支持 Ajax 獲取數(shù)據(jù)
說了半天,數(shù)據(jù)都是從本地獲取的,到底如何從服務(wù)器端獲取數(shù)據(jù)呢?
其實(shí)很簡單,在 source 函數(shù)中,自己調(diào)用 Ajax 方法來獲取數(shù)據(jù),主要注意的是,在獲取數(shù)據(jù)之后,調(diào)用 typeahead 的 process 函數(shù)處理即可。
$('#product_search').typeahead({
source: function (query, process) {
var parameter = {query: query};
$.post('@Url.Action("AjaxService")', parameter, function (data) {
process(data);
});
}
});
當(dāng)然了,在服務(wù)器上,你需要創(chuàng)建一個服務(wù)來提供數(shù)據(jù),這里,我們演示使用隨機(jī)數(shù)來生成一組隨機(jī)數(shù)據(jù)的方法。
public ActionResult AjaxService(string query)
{
System.Collections.ArrayList list
= new System.Collections.ArrayList();
System.Random random = new Random();
for (int i = 0; i < 20; i++)
{
string item = string.Format("{0}{1}", query, random.Next(10000));
list.Add(item);
}
return this.Json(list);
}
第四,使用 highlighter 和 updater
除了使用 source 函數(shù)之外,還可以使用 highlighter 函數(shù)來特別處理匹配項目的顯示,使用 updater 函數(shù),在選擇了某個匹配項之后,做出一些后繼的處理。
默認(rèn)的 highlighter 是這樣實(shí)現(xiàn)的,item 是匹配的項目,找到匹配的部分之后,使用 <strong> 加粗了。
highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'
})
}
而 updater 的默認(rèn)實(shí)現(xiàn)就更加簡單了。
updater: function (item) {
return item
}
我們可以重寫這兩個函數(shù),來實(shí)現(xiàn)自定義的處理。
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead">
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
$(document).ready(function($) {
// Workaround for bug in mouse item selection
$.fn.typeahead.Constructor.prototype.blur = function() {
var that = this;
setTimeout(function () { that.hide() }, 250);
};
$('#product_search').typeahead({
source: function(query, process) {
return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
},
highlighter: function(item) {
return "==>" + item + "<==";
},
updater: function(item) {
console.log("'" + item + "' selected.");
return item;
}
});
})
</script>
</body>
</html>
第五,使用對象數(shù)據(jù)
實(shí)際上,你的數(shù)據(jù)可能是一組對象而不是一個字符串?dāng)?shù)組,下面的例子中,我們使用一個產(chǎn)品對象的數(shù)組來說明,每個產(chǎn)品對象有一個 id 編號,還有名稱 name 和價格 price .
<html>
<head>
<link href="~/Content/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead">
</div>
<script src="~/Content/dist/js/jquery.js"></script>
<script src="~/Content/dist/js/bootstrap-typeahead.js"></script>
<script src="~/Content/dist/js/underscore-min.js"></script>
<script>
$(document).ready(function ($) {
// Workaround for bug in mouse item selection
$.fn.typeahead.Constructor.prototype.blur = function () {
var that = this;
setTimeout(function () { that.hide() }, 250);
};
var products = [
{
id: 0,
name: "Deluxe Bicycle",
price: 499.98
},
{
id: 1,
name: "Super Deluxe Trampoline",
price: 134.99
},
{
id: 2,
name: "Super Duper Scooter",
price: 49.95
}
];
$('#product_search').typeahead({
source: function (query, process) {
var results = _.map(products, function (product) {
return product.name;
});
process(results);
},
highlighter: function (item) {
return "==>" + item + "<==";
},
updater: function (item) {
console.log("'" + item + "' selected.");
return item;
}
});
})
</script>
</body>
</html>
第六,高級用法
我們希望能夠在提示中顯示產(chǎn)品的更加詳細(xì)的信息。
首先,修改我們的 source 函數(shù),原來這個函數(shù)返回一個字符串的數(shù)組,現(xiàn)在我們返回一個產(chǎn)品 id 的數(shù)組,但是,process 函數(shù)期望得到一個字符串?dāng)?shù)組的參數(shù),所以,我們將每個 id 都轉(zhuǎn)換為字符串類型。
然后,typeahead 組件就會調(diào)用 matcher 函數(shù)來檢查用戶的輸入是否與某個項目匹配,你可以使用產(chǎn)品的 id 在產(chǎn)品列表中獲取產(chǎn)品對象,然后檢查產(chǎn)品的名稱與用戶的輸入是否匹配。
默認(rèn)的 matcher 直接使用用戶的輸入來匹配,我們?nèi)绻褂?id 的話,顯然不能匹配,我們需要重寫 matcher 函數(shù)。
matcher 接收一個當(dāng)前項目的字符串,用戶當(dāng)前的輸入為 this.query,匹配返回 true, 否則返回 false. 默認(rèn)的 matcher 如下:
, matcher: function (item) {
return ~item.toLowerCase().indexOf(this.query.toLowerCase())
}
將它重寫為永遠(yuǎn)匹配,直接返回 true。而在 highlighter 中將顯示結(jié)果替換為希望的產(chǎn)品名稱和價格組合。在下一步的 highlighter 中,我們使用 Underscore 組件中的 find 方法,通過產(chǎn)品的 id 在產(chǎn)品列表中獲取產(chǎn)品對象,然后,顯示產(chǎn)品名稱和價格的組合。
highlighter: function (id) {
var product = _.find(products, function (p) {
return p.id == id;
});
return product.name + " ($" + product.price + ")";
}
默認(rèn)的 updater 直接返回當(dāng)前匹配的內(nèi)容,我們這里是一個 id, 需要重寫。
updater: function (item) {
return item
}
在用戶選擇之后,typeahead 將會調(diào)用 updater 函數(shù),我們通過產(chǎn)品的 id 在產(chǎn)品列表中獲取產(chǎn)品對象,然后
最后,updater 函數(shù)返回一個產(chǎn)品名稱的字符串,為輸入框提供內(nèi)容。setSelectedProduct 是我們的一個自定義函數(shù)。
updater: function (id) {
var product = _.find(products, function (p) {
return p.id == id;
});
that.setSelectedProduct(product);
return product.name;
}
下面是全部的代碼。
<html>
<head>
<link href="~/Content/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead">
<div id="product" style="border-width: 1; padding: 5px; border-style: solid"></div>
</div>
<script src="~/Content/dist/js/jquery.js"></script>
<script src="~/Content/dist/js/bootstrap-typeahead.js"></script>
<script src="~/Content/dist/js/underscore-min.js"></script>
<script>
$(document).ready(function ($) {
// Workaround for bug in mouse item selection
$.fn.typeahead.Constructor.prototype.blur = function () {
var that = this;
setTimeout(function () { that.hide() }, 250);
};
var products = [
{
id: 0,
name: "Deluxe Bicycle",
price: 499.98
},
{
id: 1,
name: "Super Deluxe Trampoline",
price: 134.99
},
{
id: 2,
name: "Super Duper Scooter",
price: 49.95
}
];
var that = this;
$('#product_search').typeahead({
source: function (query, process) {
$('#product').hide();
var results = _.map(products, function (product) {
return product.id + "";
});
process(results);
},
matcher: function (item) {
return true;
},
highlighter: function (id) {
var product = _.find(products, function (p) {
return p.id == id;
});
return product.name + " ($" + product.price + ")";
},
updater: function (id) {
var product = _.find(products, function (p) {
return p.id == id;
});
that.setSelectedProduct(product);
return product.name;
}
});
$('#product').hide();
this.setSelectedProduct = function (product) {
$('#product').html("Purchase: <strong>" + product.name + " ($" + product.price + ")</strong>").show();
}
})
</script>
</body>
</html>
轉(zhuǎn)自https://www.cnblogs.com/haogj/p/3376874.html 作者冠軍
該文章在 2024/7/19 11:04:57 編輯過