Next, in the previous article, I will introduce to you the Bootstrap learning series, using the Bootstrap Typeahead component to achieve Baidu pull-down effect.
Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
Official: http://twitter.github.io/typeahead.js/
Example: http://twitter.github.io/typeahead.js/examples/ (This article shows: Open Source Projects by Twitter)
Project source code: https://github.com/twitter/typeahead.js (click Download ZIP to download typeahead.js-master.zip)
Let me show you the renderings first:
1. Implementation
HTML
Tip: examples.css is the css file in the instance
<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/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"><div><label>Name</label><div>@Html.TextBox("InputName", "", new { @class = "inputName form-control", placeholder = "Please enter a name" })</div></div></div>@Html.Hidden("getInputName", Url.Action("GetInputName"))<script type="text/javascript">$('.inputName').typeahead({name: 'inputname',remote: $("#getInputName").val() + '/?query=%QUERY',template: ['<p>{{vipname}}</p>','<p>{{name}}</p>','<p>{{description}}</p>'].join(''),limit: 10,engine: Hogan});</script></div>Controller
#region Get name prompt pull down /// <summary>/// Get name prompt pull down //// </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);}#endregionpublic 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;}Model
public class TypeaheadModel{public string name { get; set; }public string vipname { get; set; }public string description { get; set; }/// <summary>/// The value of the selected text box /// </summary>public string value { get; set; }}The above is the Bootstrap Typeahead component of the BootStrap learning series introduced to you by the editor to achieve Baidu pull-down effect. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!