自動提案

Autosuggestまたはautocompleteフォームフィールドは、同じデータまたは重複データを検索してフォームに入力する際に​​顧客の作業を促進するための優れたツールです。 Googleの提案のおかげで大衆に紹介されたこの技術は、ウェブ開発者の間ですぐにサポートを見つけ、主に全文データベース検索の負荷が増加したため、情報システムの安定性とアーキテクチャを担当する人々に問題を追加しました。 この記事では、 BrandSpankingNewの既製のソリューションを検討します。おそらく、多くの人が同じiconfinder.netで 、そして今はaleria.netで見ることができます。 インストールはとても簡単です。 必須の入力フィールドにはidパラメーターが必要です。 その後、jsとcssがロードされます。 最後に、初期化オブジェクトが作成されます。初期化オブジェクトは、イベントをフィールドにバインドし、検索要求に対して生成された応答を取得するすべての作業を実行します。 設定でオブジェクトを初期化: var suggest = new bsn.AutoSuggest('search_input', {

script:"search.php?",

varname:"q",

json:true,

shownoresults:false,

maxresults:5

});




var suggest = new bsn.AutoSuggest('search_input', {

script:"search.php?",

varname:"q",

json:true,

shownoresults:false,

maxresults:5

});




設定からわかるように、autofillをsearch_inputフィールドにバインドし、search.phpスクリプトによって検索手順全体が実行されます。 JSONとXMLの両方の形式で結果を生成できますが、ユニバーサル出力(id、value、infoはjsでフラッシュされます)の必要がないため、PHPオブジェクトをJSONに完全に変換することなく、文字列のようにJSONを生成できます。 JSON形式の検索結果:
  <code> {結果:[<br /> {id: "1"、値: "Foobar"、情報: "Cheshire"}、<br /> {id: "2"、値: "Foobarfly"、情報: "Shropshire"}、<br /> {id: "3"、値: "Foobarnacle"、情報: "Essex"} <br />]} </ code> 
単語のサイズを少なくとも3文字に制限することを忘れないでください。 スクリプト自体がdivを生成してフィールドの下に設定し、キーを押して適切な結果を選択できます。



All Articles