devbridge-autocompleteプラグインのマルチ選択操作の実現方法について
3389 ワード
まずautocompleteのパラメータを見てみましょう
serviceUrl:サーバ側のURLまたはUrl文字列を返すコールバック関数.ajaxSettings:jQuery Ajaxリクエストの追加構成lookup:クエリーされたデータのリスト.文字列配列またはオブジェクト字面量(フォーマット{ value: 'string', data: any })lookupFilter:function (suggestion, query, queryLowerCase) {}ローカルデータクエリのフィルタ関数lookupLimit:クエリー・エントリの制限、デフォルト:no limit onSelect:function (suggestion) {},ユーザがクエリー結果を選択した後の破棄関数.minChars:トリガプロンプトの最小単語数、デフォルト:1 maxHeight:プロンプトリストコンテナの最大高さ、デフォルト:300 deferRequestBy:Ajaxリクエストを遅延するミリ秒数、デフォルト:0 width:提示容器の幅、デフォルト:auto params:パラメータ伝達要求、オプションformatResult : function (suggestion, currentValue) {} delimiter:文字列または正規表現、入力値を分割し、最後の1つをクエリー語として、一般的なカンマはを分割するzIndex:プロンプトコンテナのz-index値、デフォルト:9999 type:プロンプトを取得するAjaxリクエスト方式、デフォルト値:get noCache:プロンプト結果をキャッシュするかどうか、デフォルト:false onSearchStart : function (query) {} onSearchComplete : function (query, suggestions) {} onSearchError : function (query, jqXHR, textStatus, errorThrown) {} onInvalidateSelection:function () {},プロンプト結果を選択するとinputの値が変化すると関数が呼び出される.triggerSelectOnValidInput:クエリーが一致する場合、inputにフォーカスするとonSelect関数がトリガーされます.デフォルト:true preventBadQueries:デフォルト:true beforeRender:function (container) {}クエリー結果を示す前に関数を呼び出す.tabDisabled:デフォルト:false paramName:デフォルト:'query' transformResult : function(response, originalQuery) {} autoSelectFirst:クエリー・リストの最初の項目を自動的に入力するかどうか、デフォルト:false appendTo:クエリー・リスト・コンテナがその要素に追加され、デフォルト:document.body dataType:サーバが返すデータフォーマットshowNoSuggestionNotice:クエリの結果が空のプロンプトがあるかどうかのデフォルト値:false noSuggestionNotice:プロンプト、デフォルト:No results forceFixPosition:デフォルト:false orientation:プロンプトコンテナの垂直位置、デフォルト値:'bottom'、オプション値'top','auto'
groupBy:プロンプトデータオブジェクトのプロパティ
， 。
delimiter , onInvalidateSelection , triggerSelectOnValidInput
のプロジェクトでautocompleteの は、 のインデックス をクエリーして ドメインに する があることです.したがって、onInvalidateSelection、triggerSelectOnValidInputの2つのパラメータは に です.
Demo
このプレゼンテーションコードの は がなく, し える がある.もちろん、 の は ではありません.
See the Pen autocomplete by Zongbin Niu (@nzbin) on CodePen.