亲宝软件园·资讯

展开

Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

心存善念 人气:0

UnderScore官网:http://underscorejs.org/

参考文档:http://www.css88.comhttps://img.qb5200.com/download-x/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>

使用脚本填充数据

<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 组件实现百度下拉效果(续)

以上所述是小编给大家介绍的Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

加载全部内容

相关教程
猜你喜欢
用户评论