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

前端技术 2023/09/03 JavaScript

UnderScore官网：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>

使用脚本填充数据

<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 组件实现百度下拉效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/6140

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案