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 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
详解React中setState回调函数
Jun 14 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 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写入数据库类代码分享
2011/07/26 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python的Template使用指南
2014/09/11 Python
python里对list中的整数求平均并排序
2014/09/12 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python提取log文件内容并画出图表
2019/07/08 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
高三政治教学反思
2014/02/06 职场文书
阳光体育活动方案
2014/02/16 职场文书
银行工作心得体会范文
2016/01/23 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书