輸入自動提示搜尋提示功能的使用說明:sugggestion.txt_javascript技巧

readme: 本檔案記錄了suggestion.js檔案的功能使用說明:

複製程式碼 程式碼如下: /* * 機能: この js ファイルのコードは [自動検索プロンプトを入力] 機能を実装しています。たとえば、Baidu と Google の検索ボックスに文字を入力すると、フォームにいくつかのプロンプトが表示されます。ドロップダウン リストのユーザー エクスペリエンスが向上しました。 * 使用されるテクノロジー: JQuery Ajax * * 1. この関数を使用するには、次のことが必要です。次のファイルを導入します: * 1) /appName/css/common/suggestion.css"/&gt ; * 2) /appName/js/common/jquery-1.9.1.js"> * 3) /appName/js/common/suggestion.js"> * 2次のようにファイルにタグを追加する必要があります: * /appName/sug/ getSug.spring"> * * 説明: * 1). この関数を使用して、このファイルをページに導入します。同時に、この関数は jQuery テクノロジーを使用し、jQuery ファイルに依存します。suggest.js を導入する前に jQuery ファイルを導入する必要があります。 * 2) この関数を使用するために必要なテキスト入力ボックスは次のとおりであると想定されます。 ;input type="text">* 3) これは、input type="text" id="keywords_input"> のように id を指定します。 >* 4) のように、入力タグに autocomplete を指定します。 * 5) 入力タグにカスタム属性を追加します。この属性の値は、コントローラー メソッドを呼び出す必要がある URL です。たとえば、検索プロンプト データを返すには、 * /appName/sug/getSug.spring"> * (ここでは Spring MVC が使用されています Frame); * 6). DIV タグを追加します。 input タグの下の id 'sug_layer_div' (例: * * 3 .リクエスト/レスポンス データ形式の説明: (json データ形式) * 1) フロントエンドの例: $.ajax({ type: "GET", //AJAX 送信メソッドは GET submit です dataType: "json", url:$( "#keywords_input").attr("searchURL"),//処理ページの URL アドレス data:{ //渡されるパラメータ "keywords_input ":escape($("#keywords_input") .val()) }, success:function(data) { var result = data.sugList;;//フロントエンドに必要なデータ ... } }); * 2) バックエンドの例: @Controller @RequestMapping("/el/sug") @SuppressWarnings( {"rawtypes","unchecked"}) public class SugController extends ElBaseController{ @RequestMapping("getSug") public void getSuggestion (HttpServletRequest request ,HttpServletResponse response)throws JSONException { log.info(" >"); JSONObject json = new JSONObject(); String errMsg = ""; List sugList = new LinkedList (); try { String キーワード = request.getParameter("keywords_input");//フロントエンドからのデータ (入力ボックスのデータ) List sugList = SugService.getSuggestionList (keywords_input);

}catch (Exception e) { errMsg = "データの取得中に例外が発生しました。" e.getMessage(); json.put("codeid","FAILURE) "); } json.put("sugList",sugList);//フロントエンドデータに応答する ajaxResultText(response,json.toString( )); } * * 2. この関数の実装を理解するにはどうすればよいですか? * このドキュメントのコードを読んだ後、次の基本的な知識を理解する必要があります: * 1.keyUp、いくつかのキーコード ペアkeyDown およびその他のイベント: * キー キーコード | キーキー コード * 0 48 9 57 0 (数字キーボード) 96 * A 65 Z 90 9 (数字キーボード) 105 * 8 上矢印 38 Dw-Arrow40 * * 2. JavaScript のエスケープ() 関数 * エスケープ() 関数は、すべての言語で使用できるように文字列をエンコードできます。コンピューター * このメソッドは、ASCII 文字と数字をエンコードしません。また、次の ASCII 句読点文字もエンコードしません: * @ - _ / 。 * 他のすべての文字はエスケープ シーケンスに置き換えられます。例:escape("?!=()#%&") --> ?!=()#%& * * 3. autocomplete 属性は、入力フィールドで自動を有効にするかどうかを指定します。 -完全な機能。 オートコンプリートを使用すると、ブラウザーはフィールドへの入力を予測できます。 * ユーザーがフィールドに入力を開始すると、ブラウザは以前に入力した値に基づいてフィールドに入力するためのオプションを表示する必要があります。 autocomplete 属性の値を「off」、 * に設定すると、ブラウザー独自の入力プロンプト機能がオフになります * 注: autocomplete 属性は に適用され、次の * &lt ; input>Type: テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲および色。 * * 著者:sunfei(スンフェイ) 日付:2013.08.21 * */