這篇文章主要介紹了Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現百度下拉效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

頁面代碼：

@{

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>

使用腳本填充數據

<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數據1", "JS數據2", "JS數據3"];

},

highlighter: function (item) {

return "==>" + item + "<==";

},

updater: function (item) {

console.log("'" + item + "' selected."); //瀏覽器控制臺輸出

$("#product_search").val(item);

return item;

}

});

})

</script>

支持 Ajax 獲取數據

<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>

使用對象數據

<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);

}

效果圖展示如下：

以上所述是小編給大家介紹的Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現百度下拉效果，希望對大家有所幫助