BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(

发布时间：2020-12-18 00:51:46 所属栏目：安全来源：网络整理

导读：接着上篇的内容，在上篇给大家介绍了 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。官方：示例：（本文展示：Open Source Projects by Twitter）项目源码：（点

接着上篇的内容，在上篇给大家介绍了

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

官方：

示例：（本文展示：Open Source Projects by Twitter）

项目源码：（点击Download ZIP下载typeahead.js-master.zip）

先给大家展示下效果图：

1.实现

HTML

提示：examples.css为实例中的css文件

@Html.Hidden("getInputName",Url.Action("GetInputName"))

控制器

/// 获取姓名提示下拉 /// /// public ActionResult GetInputName(string query) { var list = new List(); 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 GetData() { List list = new List(); 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 string value { get; set; } }

以上所述是小编给大家介绍的BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!