Flask接口签名sign原理与实例代码浅析
197
2023-07-12
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
UnderScore官网:http://underscorejs.org/
参考文档:http://css88.com/doc/underscore/
页面代码:
@{
ViewBag.Title = "Index";
}
简单使用
Product Search:
使用脚本填充数据
Product Search:
$(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;
}
});
})
支持 Ajax 获取数据
Product Search:
$('#product_search_ajax').typeahead({
source: function (query, process) {
var parameter = { query: query };
$.post('@Url.Action("AjaxService")', parameter, function (data) {
process(data);
});
}
});
使用对象数据
Product Search:
$(function () {
var products = [
{
id: 0,
name: "object1",
price: 499.98
},
{
id: 1,
name: "object2",
price: 134.99
},
{
id: 2,
name: "object3",
price: 49.95
http://}
];
$('#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;
}
});
});
控制器
publixSYEwKc 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 组件实现百度下拉效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~