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


Posted in Javascript onJuly 07, 2016

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

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

Javascript 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
react路由配置方式详解
Aug 07 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 #Javascript
jQuery之简单的表单验证实例
Jul 07 #Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 #Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 #Javascript
Node.js DES加密的简单实现
Jul 07 #Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 #Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 #Javascript
You might like
php 删除数组元素
2009/01/16 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
JavaScript延迟加载
2021/03/09 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
大学新生欢迎词
2014/01/10 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
C++程序员求职信范文
2014/04/14 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
金融与证券专业求职信
2014/06/22 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
新课培训心得体会
2014/09/03 职场文书
求职自我推荐信
2015/03/24 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
python实现简单的聊天小程序
2021/07/07 Python