次に、前の記事では、Bootstrap Typeaheadコンポーネントを使用してBaiduプルダウン効果を実現するBootstrap Learningシリーズを紹介します。
TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
公式：http：//twitter.github.io/typeahead.js/
例：http：//twitter.github.io/typeahead.js/examples/
プロジェクトソースコード：https：//github.com/twitter/typeahead.js（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/typeead.js "） src = "@url.content（"〜/scripts/typeahead/hogan-2.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0> </script> <スクリプトsrc = "@url.content（"〜/scripts/typeahead/hogan-2.0.0.js "） src = "@url.content（"〜/scripts/typeahead/nouderscore-min.js "）" type = "text/javascript"> </script> <div> <div style = "margin：10px 50px"> <div> name </label> <div>@html.textbox（ "" inputname "" PlaceHolder = "name"}）</div> </div> </div>@html.hidden（ "getInputName"、url.action（ "getInputName"））<スクリプトタイプ= "テキスト/javascript"> $（ '。入力名'）。 '/？query =％query'、テンプレート：['<p> {{vipname}} </p>'、 '<p> {{name}} </p>'、 '<p> {{description}} </p>']コントローラ
#region get name prompt wuld down /// <summary> /// get name name propent pull down //// getData（））{if（item.name.contains（query））{list.add（item）（item）;}}} return json（list、jsonrequestbehavior.allowget）;}＃endregionpublic list <typeaheadmodel> getdata（）{<<typeaheadmodel> list <typeaheadmodel> = new TypeaHeadModel（）; 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;セット; } public string vipname {get;セット; } public string description {get;セット; } /// <summary> ///選択したテキストボックスの値/// </summary> public string値{get;セット; }}上記は、Baiduのプルダウン効果を実現するために編集者が紹介したBootstrap LearningシリーズのブートストラップTypeaheadコンポーネントです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！