溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Bootstrap中Typeahead組件怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
Bootstrap 中的 Typeahead 組件就是通常所說的自動完成 AutoComplete，功能很強大，但是，使用上并不太方便。這里我們將介紹一下這個組件的使用。
首先，最簡單的使用方式，就是直接在標記中聲明，通過 data-provide="typeahead" 來聲明這是一個 typeahead 組件，通過 data-source= 來提供數(shù)據(jù)。當然了，你還必須提供 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ù)，那么，頁面可以變成如下的形式。
<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 調用從服務器端獲取匹配的數(shù)據(jù)，那么，在異步完成的處理函數(shù)中，你需要獲取一個匹配的字符串數(shù)組，然后，將這個數(shù)組作為參數(shù)，調用 process 函數(shù)。
說了半天，數(shù)據(jù)都是從本地獲取的，到底如何從服務器端獲取數(shù)據(jù)呢？
其實很簡單，在 source 函數(shù)中，自己調用 Ajax 方法來獲取數(shù)據(jù)，主要注意的是，在獲取數(shù)據(jù)之后，調用 typeahead 的 process 函數(shù)處理即可。
$('#product_search').typeahead({
source: function (query, process) {
var parameter = {query: query};
$.post('@Url.Action("AjaxService")', parameter, function (data) {
process(data);
});
}
});當然了，在服務器上，你需要創(chuàng)建一個服務來提供數(shù)據(jù)，這里，我們演示使用隨機數(shù)來生成一組隨機數(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);
}除了使用 source 函數(shù)之外，還可以使用 highlighter 函數(shù)來特別處理匹配項目的顯示，使用 updater 函數(shù)，在選擇了某個匹配項之后，做出一些后繼的處理。
默認的 highlighter 是這樣實現(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 的默認實現(xiàn)就更加簡單了。
updater: function (item) {
return item
}我們可以重寫這兩個函數(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ù)組來說明，每個產品對象有一個 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>我們希望能夠在提示中顯示產品的更加詳細的信息。
首先，修改我們的 source 函數(shù)，原來這個函數(shù)返回一個字符串的數(shù)組，現(xiàn)在我們返回一個產品 id 的數(shù)組，但是，process 函數(shù)期望得到一個字符串數(shù)組的參數(shù)，所以，我們將每個 id 都轉換為字符串類型。
然后，typeahead 組件就會調用 matcher 函數(shù)來檢查用戶的輸入是否與某個項目匹配，你可以使用產品的 id 在產品列表中獲取產品對象，然后檢查產品的名稱與用戶的輸入是否匹配。
默認的 matcher 直接使用用戶的輸入來匹配，我們如果使用 id 的話，顯然不能匹配，我們需要重寫 matcher 函數(shù)。
matcher 接收一個當前項目的字符串，用戶當前的輸入為 this.query，匹配返回 true, 否則返回 false. 默認的 matcher 如下：
, matcher: function (item) { return ~item.toLowerCase().indexOf(this.query.toLowerCase())
}將它重寫為永遠匹配，直接返回 true。而在 highlighter 中將顯示結果替換為希望的產品名稱和價格組合。在下一步的 highlighter 中，我們使用 Underscore 組件中的 find 方法，通過產品的 id 在產品列表中獲取產品對象，然后，顯示產品名稱和價格的組合。
highlighter: function (id) { var product = _.find(products, function (p) { return p.id == id;
}); return product.name + " ($" + product.price + ")";
}默認的 updater 直接返回當前匹配的內容，我們這里是一個 id, 需要重寫。
updater: function (item) { return item
}在用戶選擇之后，typeahead 將會調用 updater 函數(shù)，我們通過產品的 id 在產品列表中獲取產品對象，然后
最后，updater 函數(shù)返回一個產品名稱的字符串，為輸入框提供內容。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>感謝各位的閱讀！關于“Bootstrap中Typeahead組件怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
