第六章 使用 Bootstrap Typeahead 组件(百度下拉效果)(续)
官方:http://twitter.github.io/typeahead.js/
示例:http://twitter.github.io/typeahead.js/examples/(本文展示:Open Source Projects by Twitter)
项目源码:https://github.com/twitter/typeahead.js(点击Download ZIP下载typeahead.js-master.zip)
1.实现
HTML
提示:examples.css为实例中的css文件
<link type="text/css" href="@Url.Content("~/Scripts/typeahead/examples.css")" rel="stylesheet"/>
<script src="@Url.Content("~/Scripts/typeahead/typeahead.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/typeahead/hogan-2.0..js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/typeahead/underscore-min.js")" type="text/javascript"></script>
<div>
<div style="margin: 10px 50px" class="col-md-3">
<div class="form-group example-twitter-oss">
<label class="col-md-4 control-label ">
姓名</label>
<div class="col-md-7">
@Html.TextBox("InputName", "", new { @class = "inputName form-control", placeholder = "请输入姓名" })
</div>
</div>
</div>
@Html.Hidden("getInputName", Url.Action("GetInputName"))
<script type="text/javascript">
$('.inputName').typeahead({
name: 'inputname',
remote: $("#getInputName").val() + '/?query=%QUERY',
template: ['<p class="repo-language">{{vipname}}</p>',
'<p class="repo-name">{{name}}</p>',
'<p class="repo-description">{{description}}</p>'
].join(''),
limit: ,
engine: Hogan
});
</script>
</div>
控制器
#region 获取姓名提示下拉
/// <summary>
/// 获取姓名提示下拉
/// </summary>
/// <returns></returns>
public ActionResult GetInputName(string query)
{
var list = new List<TypeaheadModel>();
if (!string.IsNullOrWhiteSpace(query))
{
query = query.Trim(); foreach (var item in GetData())
{
if (item.name.Contains(query))
{
list.Add(item);
}
}
}
return Json(list, JsonRequestBehavior.AllowGet);
}
#endregion public List<TypeaheadModel> GetData()
{
List<TypeaheadModel> list = new List<TypeaheadModel>();
TypeaheadModel model = new TypeaheadModel(); for (int i = ; i < ; i++)
{
model = new TypeaheadModel();
model.description = "D";
model.vipname = "V";
model.name = "A" + i.ToString();
model.value = "A" + i.ToString();//
list.Add(model);
} for (int i = ; i < ; i++)
{
model = new TypeaheadModel();
model.description = "";
model.vipname = "";
model.name = "B" + i.ToString();
model.value = "B" + i.ToString();
list.Add(model);
} return list;
}
模型
public class TypeaheadModel
{
public string name { get; set; }
public string vipname { get; set; }
public string description { get; set; }
/// <summary>
/// 选中后文本框的值
/// </summary>
public string value { get; set; }
}
2.效果:
aaarticlea/png;base64,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" alt="" />
第六章 使用 Bootstrap Typeahead 组件(百度下拉效果)(续)的更多相关文章
- 第五章 使用 Bootstrap Typeahead 组件(百度下拉效果)
推荐链接:http://www.cnblogs.com/haogj/p/3376874.html UnderScore官网:http://underscorejs.org/ 参考文档:http://w ...
- Bootstrap <基础十二>下拉菜单(Dropdowns)
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- 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/ 目前项目中碰到的使用,比如一个页面中有两个不 ...
- 【亲测好用!】shell批量采集百度下拉框关键词
[亲测好用!]shell批量采集百度下拉框关键词 SEO工具 方法 11个月前 (11-18) 2153浏览 3条评论 百度已收录 一直想写一篇用shell采集百度下拉框关键词的教程,个人感觉用 ...
- 仿百度下拉关键词,和关键词的小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" ...
随机推荐
- DependencyInjection源码解读之ServiceProvider
var services = new ServiceCollection(); var _serviceProvider = services.BuildServiceProvider(); serv ...
- iview库表table组件内嵌套Select组件
表格内render函数渲染Select组件 { title: '属性值', key: 'values', render:(h,params)=>{ return h('Select',{ ...
- ORM框架SQLAlchemy
SQLAlchemy orm英文全称object relational mapping,就是对象映射关系程序,简单来说就是类似python这种面向对象的程序来说一切皆对象,但是使用的数据库却都是关系型 ...
- Flask 快速使用 进阶—— (2)
案例:可配置发送信息的系统 假如我们有这样的一个系统,可以发送短息,邮件和微信,后期可能还会增加一些平台,怎么才可以做到快速切换的去使用某种功能呢,在这里我会通过在配置文件中简单的配置就可以实现 在项 ...
- 第一章· Redis入门部署及持久化介绍
Redis简介 Redis安装部署 Redis持久化 Redis简介 软件说明: Redis是一款开源的,ANSI C语言编写的,高级键值(key-value)缓存和支持永久存储NoSQL数据库产品. ...
- P2256 一中校运会之百米跑(map映射加并查集)
真心水,也许只有我这样的蒟蒻能做这种题了吧.用STL中的map将所有人的名字映射成一个数字,然后就是并查集的裸题 #include<bits/stdc++.h> using namespa ...
- mysql-笔记-数据类型
https://dev.mysql.com/doc/refman/5.7/en/numeric-type-overview.html serial: SERIAL is an alias for BI ...
- ibufds原语
低压差分传送技术是基于低压差分信号(Low Volt-agc Differential signaling)的传送技术,从一个电路板系统内的高速信号传送到不同电路系统之间的快速数据传送都可以应用低压差 ...
- ORACLE表数据误删除的恢复方法(提交事务也可以)
ORACLE表数据误删除的恢复方法(提交事务也可以) 缓存加时间戳 开启行移动功能:ALTER TABLE tablename ENABLE row movement 把表还原到指定时间点:flash ...
- 洛谷P2634 聪明可可
还是点分治 树上问题真有趣ovo,这道题统计模3为0的距离,可以把重心的子树分开统计,也可以一次性统计,然后容斥原理减掉重复的.. 其他的过程就是点分治的板子啦. #include <bits/ ...