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

Bootstrap 2019-01-01

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

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

官方：

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

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

先给大家展示下效果图：

1.实现

HTML

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

rush:js;">

Box("InputName","",new { @class = "inputName form-control",placeholder = "请输入姓名" })

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

控制器

rush:js;"> #region 获取姓名提示下拉 ///

/// 获取姓名提示下拉 ///

/// 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; }

模型

rush:js;"> public class TypeaheadModel { public string name { get; set; } public string vipname { get; set; } public string description { get; set; } ///

/// 选中后文本框的值 ///

public string value { get; set; } }

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

bootstrap bootstrap bootstrap组件 typeahead

Bootstrip HTML 查询搜索常用格式模版

Bootstrip HTML 查询搜索常用格式模版 <form class=&...

如何在按钮上加红色数字

如何在按钮上加红色数字您可以使用Bootstrap的badge组件来在...

让两个按钮左右排列

要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...

status能否设置为布尔值类型，前端采用复选框形式

是的，可以将status设置为布尔类型，这样可以在前端使用复选...