次に、前の記事では、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のウェブサイトへのご支援ありがとうございます!