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 相关文章推荐
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
angular动态表单制作
Feb 23 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
vue如何使用外部特殊字体的操作
Jul 30 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
第十三节--对象串行化
2006/11/16 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
vue中的scope使用详解
2017/10/29 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
小程序关于请求同步的总结
2019/05/05 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
JS实现多功能计算器
2020/10/28 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python解析nginx日志文件
2015/05/11 Python
python使用turtle库绘制树
2018/06/25 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
家长评语大全
2014/01/22 职场文书
环保倡议书50字
2014/05/15 职场文书
会计师事务所实习证明
2014/11/16 职场文书
骨干教师个人总结
2015/02/11 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
Python循环之while无限迭代
2022/04/30 Python