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 相关文章推荐
让table变成exls的示例代码
Mar 24 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
vue中英文切换实例代码
Jan 21 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
2014过年倒计时示例
2014/01/31 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
python opencv3实现人脸识别(windows)
2018/05/25 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
学校消防安全制度
2014/01/30 职场文书
公关活动策划方案
2014/05/25 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
新郎结婚保证书
2015/02/26 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
canvas实现贪食蛇的实践
2022/02/15 Javascript
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers