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

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

接着上篇的内容，在上篇给大家介绍了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）

先给大家展示下效果图：

1.实现

HTML

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

姓名

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

</div>

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

控制器

#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(mohttp://del);

}

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

///

/// 选中后文本框的值

///

public string value { get; set; }

}

以上所述是给大家介绍的BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。