Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現(xiàn)百度下拉效果
更新時間：2016年07月07日 11:44:48 作者：心存善念
這篇文章主要介紹了Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現(xiàn)百度下拉效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
UnderScore官網(wǎng)：http://underscorejs.org/
參考文檔：http://www.css88.com/doc/underscore/
頁面代碼：
@{
ViewBag.Title = "Index";
}
<script src="Scripts/bootstrap-typeahead.js"></script>
<script src="Scripts/underscore-min.js"></script>
<div>
簡單使用
<div style="margin: 10px 50px"> <label for="product_search"> Product Search: </label> <input id="product_search" type="text" data-provide="typeahead" data-source='["DATA1", "DATA2", "DATA3"]' /> </div>
使用腳本填充數(shù)據(jù)
<div style="margin: 10px 50px">
<label for="product_search">
Product Search:
</label>
<input id="product_search_js" type="text" data-provide="typeahead">
</div>
<script type="text/javascript">
$(document).ready(function ($) {
$.fn.typeahead.Constructor.prototype.blur = function () {
var that = this;
setTimeout(function () { that.hide() }, 250);
};
$('#product_search_js').typeahead({
source: function (query, process) {
return ["JS數(shù)據(jù)1", "JS數(shù)據(jù)2", "JS數(shù)據(jù)3"];
},
highlighter: function (item) {
return "==>" + item + "<==";
},
updater: function (item) {
console.log("'" + item + "' selected."); //瀏覽器控制臺輸出
$("#product_search").val(item);
return item;
}
});
})
</script>
支持 Ajax 獲取數(shù)據(jù)
<div style="margin: 10px 50px">
<label for="product_search">
Product Search:
</label>
<input id="product_search_ajax" type="text" data-provide="typeahead">
</div>
<script type="text/javascript">
$('#product_search_ajax').typeahead({
source: function (query, process) {
var parameter = { query: query };
$.post('@Url.Action("AjaxService")', parameter, function (data) {
process(data);
});
}
});
</script>
使用對象數(shù)據(jù)
<div style="margin: 10px 50px">
<label for="product_search">
Product Search:
</label>
<input id="product_search_object" type="text" data-provide="typeahead">
</div>
<script type="text/javascript">
$(function () {
var products = [
{
id: 0,
name: "object1",
price: 499.98
},
{
id: 1,
name: "object2",
price: 134.99
},
{
id: 2,
name: "object3",
price: 49.95
}
];
$('#product_search_object').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>
</div>
控制器
public ActionResult Index()
{
return View();
}
public ActionResult AjaxService()
{
string query = "";
if (!string.IsNullOrWhiteSpace(Request["Query"]))
query = Request["Query"].ToString();
var data = ("AJAX1,AJAX2,AJAX3").Split(',');
return Json(data);
}
效果圖展示如下：
下面繼續(xù)給大家介紹BootStrap學習系列之Bootstrap Typeahead 組件實現(xiàn)百度下拉效果(續(xù))
以上所述是小編給大家介紹的Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現(xiàn)百度下拉效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
本文主要介紹了js面向對象編程的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了BootStrap 動態(tài)表單效果,實現(xiàn)代碼分為js部分和html部分，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片切割功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)登錄頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了js禁止瀏覽器的回退事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本篇文章主要介紹了wow.js中各種特效對應的類名 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了layui實現(xiàn)三級聯(lián)動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例
這篇文章主要為大家介紹了TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了JS導航欄navigator的一些冷知識使用方法實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
本篇主要是對innerHTML,outerHTML,innerText,outerText的用法及區(qū)別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12