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

前端技术 2023/09/07 JavaScript

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

<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 组件实现百度下拉效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/20145

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案