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 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
vue实现表格合并功能
Dec 01 Vue.js
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
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
js编写选项卡效果
2017/05/23 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
基于python编写的微博应用
2014/10/17 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
django url到views参数传递的实例
2019/07/19 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
基于python中__add__函数的用法
2019/11/25 Python
python集合删除多种方法详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
读书演讲主持词
2014/03/18 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书