0

jQuery UI オートコンプリートを使用してページを作成しました。

ユーザーは、オートコンプリートを使用して、場所のリストから場所を選択することを意図しています。この改善の前は、ユーザーは長いリストから場所を選択する必要がありましたが、これは 1 つの問題を除けばはるかに優れていました。

場所は次のようにフォーマットされます。

"カナダ"

「カナダ -> アルバータ」

「カナダ→ブリティッシュコロンビア」

"アメリカ"

「アメリカ合衆国 -> アラバマ」

「アメリカ合衆国 -> アラスカ」

等々。そこで、「カナダ」、「米国 -> カリフォルニア」、「メキシコ -> カンペチェ」のような「CA」で始まる国と州のリストを期待して「CA」と入力して、このアプリケーションをテストしました。

しかし、残念なことに、「CA」は「Canada」の「CA」と一致するため、カナダのすべての州が 1 つずつリストされています。現在、20 近くの選択肢から選択できます。

ユーザーは州を検索するときに国名と州名を含む階層を表示する必要がありますが、国としての「カナダ」は単一の場所として単一の一致である必要があります。

「->」の右側のテキストのみが一致するように非常に多くの単語で指定できるように、jQuery オートコンプリートを設定するにはどうすればよいですか?

現在、私の Javascript コードには、var locations = "[{'label':'Canada','value','Canada'},{'label':'Canada -> Alberta', 'value':' があります。アルバータ'}...]。

これを非同期で機能させたくありません。あまりにも多くの Web サービス呼び出しが発生するのではないかと心配しています。

4

1 に答える 1

0

私はこれを理解しました。優れたjQueryUIリファレンスがあると役立ちます。

.autocompleteメソッドのソース変数の場合、オートコンプリートデータを渡すか、関数にハンドラーを渡して、次のようにオートコンプリートオプションを取得できます。

$('#txtData').autocomplete( source: getData )

termハンドラー関数には2つの引数が渡されます。最初の引数は、ユーザーが入力したテキストを含む1つのフィールドを持つオブジェクトです。もう1つは、さらに別の関数へのハンドラーです。この他の関数は、オートコンプリートオプションを含むデータである1つのパラメーターを取ります。

function getData(userData, setAutocompleteData) {
    var userText = userData.term;
    var autocompleteData = getMatchingOptions(userText);
    // getMatchingOptions returns a list of matching autocomplete options
    setAutocompleteData(autocompleteData);
}

上記のコードスケルトンをの実装と組み合わせるとgetMatchingOptions、ユーザーに表示されるオートコンプリートオプションをカスタマイズできます。

于 2011-02-09T14:42:40.840 に答える