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操作checkbox用document.getElementById实现
Oct 12 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
script标签属性用type还是language
Jan 21 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
微信小程序文章列表功能完整实例
Jun 03 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基础学习笔记
2007/03/18 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
深入解析php中的foreach函数
2013/08/31 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
django框架模板语言使用方法详解
2019/07/18 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
捐助倡议书范文
2014/04/15 职场文书
新员工入职感想
2015/08/07 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python