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 相关文章推荐
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
angular.js实现购物车功能
Oct 23 Javascript
vue配置多页面的实现方法
May 22 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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仿QQ验证码的实例分析
2013/07/01 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
python 判断一个进程是否存在
2009/04/09 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python list多级排序知识点总结
2019/10/23 Python
python 经典数字滤波实例
2019/12/16 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
教学评估实施方案
2014/03/16 职场文书
高三毕业寄语
2014/04/10 职场文书
《秋游》教学反思
2014/04/24 职场文书
安全月活动总结
2014/05/05 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Python作用域和名称空间的详细介绍
2022/04/13 Python