2

ユーザーが数千の値のリストから複数の値を選択する必要がある場合を考えてみましょう。使用可能なツールに最も近いのはhttp://quasipartikel.at/multiselect/です

主な問題は、ユーザーが選択しなければならない大量のデータによるものです。私が現在使用しているアプローチは、ユーザーがテキストボックスに最初の文字を入力する必要があり、最初の文字で始まるすべての値が複数選択のために表示されるというものです(したがって、かなりの値のリストにフィルタリングします)。

問題は、それでも値の数が非常に多いため、複数選択オプションをリロードするのに 5 ～ 15 秒かかることです。ただし、値が読み込まれると、ユーザーが後続の文字を入力すると、javascript フィルタリングが残りを処理します。

この状況に取り組むための他の方法について何か提案はありますか????

4

2 に答える 2

1

事前入力された複数選択ボックスを使用する代わりに、jQueryUI Autocompleteを使用してリスト サーバー側をフィルタリングし、一致するものだけをクライアントに返します (StackOverflow でタグ選択が機能する方法と同様)。

ここに複数の値を選択する良い例がありますhttp://jqueryui.com/autocomplete/#multiple-remote

その後、複数選択を処理するのと同じ方法で、選択の結果を保存できます。

最初の文字がサーバーから用語を取得し、その後それらの結果からフィルター処理するハイブリッド アプローチを実装するには、次を使用できます (これは完全にテストされていないことに注意してください)。

結果を保持するグローバル変数を追加します

var results_cache = [];

ハイブリッド ソースを使用するautocomplete

source: function( request, response ) {
    // get the first letter of your search term
    var letter = request.term.substring(0,1);
    // check to see if we already have results for this letter
    if (!results_cache[letter]){
        // no results, fetch via AJAX
        $.getJSON( "search.php", { term: request.term }, 
            function(data){ 
                // cache results
                results_cache[letter] = data;
                // filter results (in case we have more than just 1 character in the term)
                response($.ui.autocomplete.filter(data, request.term));
            }
        );
    } else {
        // we already have data for this letter, just filter the results from the cache
        response($.ui.autocomplete.filter(results_cache[letter], request.term));
    }
},
search: function() {
    // make sure we have at least 1 character for the term
    if (!this.value) return;
    var term = this.value;
},
于 2012-10-29T15:42:10.523 に答える
0

以下が役に立ちました。

最初に、最終的な大きなサイズの入力を選択する前に、特定の入力パラメーターに基づいて値をフィルター処理します。 次に、 jquery 選択値がロードされる前に、制限を 1 文字から複数文字に増やします。これにより、値の数がさらに制限されますが、ユーザーは複数文字の入力制限に注意する必要があります

しかし、http: //quasipartikel.at/multiselect/は、利用可能な最良のオプションであると感じています。

于 2012-10-29T15:41:54.087 に答える