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 Jcrop插件实现图片选取功能
Nov 23 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
js快速排序的实现代码
Dec 08 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
使用JS获取SessionStorage的值
Jan 12 Javascript
React组件refs的使用详解
Feb 09 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
Vue可自定义tab组件用法实例
Oct 24 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文本数据库的搜索方法
2006/10/09 PHP
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php中目录,文件操作详谈
2007/03/19 PHP
php变量范围介绍
2012/10/15 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
python的unittest测试类代码实例
2017/12/07 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python得到单词模式的示例
2018/10/15 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
自我评价范文点评
2013/12/04 职场文书
安全标准化汇报材料
2014/02/03 职场文书
销售内勤岗位职责
2014/04/15 职场文书
应届生求职信
2014/05/31 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书