BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)


Posted in Javascript onJuly 07, 2016

接着上篇的内容,在上篇给大家介绍了Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

官方: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)

先给大家展示下效果图:

BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)

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.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: 10,
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 = 0; i < 5; 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 = 3; i < 10; 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; }
}

以上所述是小编给大家介绍的BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
原生JS实现九宫格抽奖
Sep 13 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
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 #Javascript
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
php文件上传类的分享
2017/07/06 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
js实现碰撞检测
2021/01/29 Javascript
Python中如何获取类属性的列表
2016/12/26 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
竞聘自述材料
2014/08/25 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
实习科室评语
2015/01/04 职场文书
税务会计岗位职责
2015/04/02 职场文书
未婚证明范本
2015/06/15 职场文书
入党函调证明材料
2015/06/19 职场文书