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 对象成员的可见性说明
Oct 16 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Python出现segfault错误解决方法
2016/04/16 Python
Python 爬虫图片简单实现
2017/06/01 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python中logging实例讲解
2019/01/17 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python ubplot使用方法解析
2020/01/10 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
Java工程师面试集锦之Spring框架
2013/06/16 面试题
英文留学推荐信范文
2014/01/25 职场文书
安全生产先进个人材料
2014/02/06 职场文书
公务员政审材料范文
2014/12/23 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
毕业设计致谢语
2015/05/14 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
如何使JavaScript休眠或等待
2021/04/27 Javascript