これは、投稿コードの欠点の1つです。検索ボックスはネチズンによってほとんど壊れています！ ！ ！故意にスペースに入る人、一部の人が入る人、または1 = 1、一部の人々は警告、一部の人はHTMLに入る...そして彼らはまだ遊んでいるようですので、彼らは幸せである限り彼らを手放します。
プロジェクトでは、BaiduやTaobaoなどの検索ボックスと同様に、入力ボックスの自動完了関数がよく使用されます。ユーザーが初期文字とキーワードを入力すると、背景は関連するエントリをすばやく返し、ユーザーエクスペリエンスを選択して改善できるようにフロントデスクに表示します。もちろん、このプロジェクトの完了機能は、これらの主要メーカーの技術に匹敵するものではありませんが、現場での検索には十分です。
AutoCompleteとTypeaHeadと接触した2つの主要な自動完成プラグインがあります。このサイトでは、Typeaheadを使用しています。
jqueryui-autocomplete
自動完了プラグインブートストラップ-3-タイピアヘッド
関連パラメーター説明：
ソース： function（query、process）{}。クエリは、現在のテキスト入力ボックスの文字列を表します。この方法では、Ajaxを介して背景（配列の形のJSONオブジェクト）からデータを要求でき、その後、返されたオブジェクトはプロセスのパラメーターとして使用されます。
FormatiTem ：function（item）{}。データを返す特定のJSONオブジェクトは、プロンプトリストに表示されるために使用される文字列形式に変換され、戻り値は次のとおりです。
setValue ：function（item）{}。プロンプトリストのアイテムが選択されている場合、テキスト入力ボックスに表示される値と、実際に取得する必要がある値を設定します。 return値形式：{'data-value'：item ["入力ボックスに表示される値の項目プロパティ"]、 'real-value'：item [""項目[取得する必要がある実際の値のアイテムプロパティ "]}、後で、この値はテキスト入力ボックスの実際の値プロパティを介して取得できます。
項目：自動完了プロンプトの結果セットの最大数、デフォルト：8;
minlength：一致するプロセスは、現在のテキスト入力ボックスの文字列がプロパティ値に達した場合にのみ実行されます。デフォルト：1;
遅延：遅延ミリ秒の数を指定した後、バックグラウンドから頻繁にリクエストが頻繁に入力されないようにするために、バックグラウンドからデータが要求されます。デフォルト：500
特定のコードは次のとおりです。
最初にJSファイルを導入します
<script src = "〜/scripts/jquery-1.9.0.js"> </scrip> <scrip src = "〜/scripts/bootstrap.js"> </script> <script src = "〜/content/js/bootstrap3-typeahead.js"> </script>
HTMLコード：
<form id = "searchform" role = "search"ターゲット= "_ blank" method = "get" action = "/search/index"> <div> <indive type = "text" id = "searchwords" name = "searchwords" data-provide = "typeeahead" off "off" placeholder = " id = "searchbtn"> search </button> </form>
関連する検索用語を処理するJS：
//検索自動的に完了します。検索ボックスを自動アソシエーション完了イベントAutocomplete：function（）{jquery（ '＃searchwords'）。{source：function（query、process）{//入力値jquery.getJson（ '/search/gethotsearchItems'、{"query"：query}}、unts（data）; {return item.replace（/<a（。+？）<// a>/""）;バックグラウンド処理/検索/gethotsearchItems：
#region 2.0 jQuery Typeaheadプラグインは、検索ホットワードを非同期に取得し、検索ボックスを自動的に完了します。 ActionResult gethotsearchItems（）/// <summary> /// 2.0 jQuery Typeaheadプラグインは検索ホットワードを非同期に取得し、検索ボックス> ///を自動的に完成させます。 <Returns> json </returns> public ActionResult gethotsearchItems（）{// 2.1データベースからこの検索用語を含む、検索で並べ替えて、データをtypeahead.jslist <searchrank> hotlist = hotservice.getDatalistby（s => s.keyword.contains（query）、s => s.searchtimes）; h.searchtimes}） jsonrequestbehavior.allowget）;} else {return json（ ""、jsonrequestbehavior.allowget）;}} #endregion今のところやりましょう。