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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 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目录拷贝实现方法
2015/07/10 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
vuejs如何配置less
2017/04/25 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
vue实例的选项总结
2020/06/09 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
django表单实现下拉框的示例讲解
2018/05/29 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
基于python操作ES实例详解
2019/11/16 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
Django celery异步任务实现代码示例
2020/11/26 Python
python中的时区问题
2021/01/14 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
个人合作协议书范本
2014/04/18 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
网络销售员岗位职责
2015/04/11 职场文书