第五章 使用 Bootstrap Typeahead 组件(百度下拉效果)
推荐链接:http://www.cnblogs.com/haogj/p/3376874.html
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() }, );
}; $('#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: ,
name: "object1",
price: 499.98
},
{
id: ,
name: "object2",
price: 134.99
},
{
id: ,
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 Typeahead 组件(百度下拉效果)的更多相关文章
- 第六章 使用 Bootstrap Typeahead 组件(百度下拉效果)(续)
官方:http://twitter.github.io/typeahead.js/ 示例:http://twitter.github.io/typeahead.js/examples/(本文展示:Op ...
- Bootstrap <基础十二>下拉菜单(Dropdowns)
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- 【亲测好用!】shell批量采集百度下拉框关键词
[亲测好用!]shell批量采集百度下拉框关键词 SEO工具 方法 11个月前 (11-18) 2153浏览 3条评论 百度已收录 一直想写一篇用shell采集百度下拉框关键词的教程,个人感觉用 ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- chosen组件实现下拉框
chosen组件用于增强原生的select控件,使之有更好的用户体验.官方demo https://harvesthq.github.io/chosen/ 目前项目中碰到的使用,比如一个页面中有两个不 ...
- 仿百度下拉关键词,和关键词的小demo
自己做项目时用到的仿百度下拉关键词 代码: $(function(){ var oTxt = document.getElementById('search_text'); oTxt.onkeyup ...
- Bootstrap历练实例:下拉菜单插件方法的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- vue的jsonp百度下拉菜单
通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...
- vue实现百度下拉框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- ESRI.ArcGIS.esriSystem名称空间问题
在AO或AE开发中,并没有ESRI.ArcGIS.esriSystem这个dll,只有ESRI.ArcGIS.System,凡是需要ESRI.ArcGIS.esriSystem命名空间时,添加ESRI ...
- atitit.木马病毒webshell的原理and设计 java c# .net php.
atitit.木马病毒webshell的原理and设计 java c# .net php. 1. 隐蔽性 编辑 WebShell后门具有隐蔽性,一般有隐藏在正常文件中并修改文件时间达到隐蔽的,还有利用 ...
- android ImageSwitcher
<?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android=&q ...
- 使用NPOI将多张图片导入execl
protected void btn_Export_Click(object sender, EventArgs e) { List<BNXX_SJXJ_XJSJ> list = View ...
- 关于Activity销毁,而绘制UI的子线程未销毁出现的问题
项目总结 ----------------------------------------------------------------------------------------------- ...
- IOS 网络浅析-(三 NSURLConnection代理)
对于现在的iOS开发,用法简单,最古老最经典最直接的NSURLConnection的作用不是很大,但是作为一名ios开发者,我们应该拥有一颗热爱学习的心,下面通过代码的实现简单介绍一下NSURLCon ...
- Effective Java 23 Don't use raw types in new code
Generic types advantage Parameterized type can provide erroneous check in compile time. // Parameter ...
- SQL获取时间段内的所有月份
select convert(varchar(7),dateadd(month,number,'2010-01-01'),120) AS MONTHfrom master..spt_valueswhe ...
- Linux下Redis安装及配置
1.下载安装包 # cd ~/Download # wget http://download.redis.io/releases/redis-3.0.7.tar.gz --选择要下载的版本 ...
- python lambda表达式简单用法
习条件运算时,对于简单的 if else 语句,可以使用三元运算来表示,即: 1 2 3 4 5 6 7 8 # 普通条件语句 if 1 == 1: name = 'wupeiqi' else ...