jQuery UIオートコンプリートで結果を制限する


126

私はjQuery UI Autocompleteを使用しています。

 $("#task").autocomplete({
     max:10,
     minLength:3,
     source: myarray
 });          

maxパラメータが機能せず、10以上の結果が得られます。何か不足していますか?


11
maxオートコンプリートで呼び出されるオプションはありません
Jayantha Lal Sirisena 2011年

回答:


272

以下は、jQueryUIウィジェットの適切なドキュメントです。最大結果を制限するための組み込みパラメーターはありませんが、簡単に実現できます。

$("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});

sourceパラメータに関数を指定sliceして、フィルタリングされた配列を呼び出すことができます。

これが実際の例です: http : //jsfiddle.net/andrewwhitaker/vqwBP/


7
魅力のように機能します。オートコンプリートリストが非常に長く(結果が10k以下)、htmlレンダリングが遅くなる場合に非常に便利ですか。
Benjamin Crouzier、2011年

本当にありがとうございました!これで、ユーザーにlocalStorageの大規模なリストを許可することができますが、Webサイトは非常に高速に感じられます。美しい!:Dこれは本当にありがとう!:D とてもうれしくて
たまたま

同じページに2つのオートコンプリートボックスがある場合はどうなりますか?両方で応答スライスを実行すると、両方がスライスを停止します:/
Alisso

このソリューションの+1。結果をさらに絞り込むためにminLength:3を追加します。jsfiddle.net/vqwBP/295
Adrian P.

2
提供されているjsFiddleのソリューションで、スライス値を10から3に変更し、入力ボックスに文字Cを入力します。エンドユーザーに3つの値しか表示されず、これらの値は3つしかないと考えられます。文字を入力し続けることはできません。私が提案しているのは、このソリューションに付随する適切なヘルプテキストを提供することだけです(たとえば、XXに一致する上位の結果のみが表示されます。結果を絞り込むために入力を続けてください。)
HPWD

45

minlengthオプションを大きな値に設定することも、このようなcssでそれを行うこともできます。

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

天才。私はこれのシンプルさが気に入っており、ユーザーが決めることができます。
denislexic 2012年

18
これはかなりハックです。本当に長いリストがあり、オートコンプリートが数千の一致を返す場合、それは
非常に

1
ヴァイクに同意する。これは、スケーラビリティの観点からは不十分なソリューションです。
Kiksy 2013

4
ヴァイクに同意する。ゲームがJSの場合は、CSSでプレイしないでください。
エイドリアンP.

辞書アプリケーションでも同じことをしました。その価値がある!
Moxet 2014

25

「Jayantha」と同じように、CSSを使用するのが最も簡単な方法だと言いましたが、これはより良いかもしれません、

.ui-autocomplete { max-height: 200px; overflow-y: scroll; overflow-x: hidden;}

唯一の違いは「max-height」であることに注意してください。これにより、ウィジェットの高さを200px以下にすることができます


4
あなたのソリューションのために。これは、jQueryソリューションについて説明している有効なものです。問題をjQueryで解決できる場合、プログラマーにCSSソリューションを提供することはお勧めできません。そして最後に、これは受け入れられた回答のように問題を解決しない結果をマスクするだけです。どうぞ!
Adrian P.

3
@SamBattatプログラミングの問題にcssを使用することは恐ろしいハックです。それをデバッグしようと想像してみてください!
Christian Payne

19

Andrewの回答に加えて、プロパティを導入maxResultsて次のように使用することもできます。

$("#auto").autocomplete({ 
    maxResults: 10,
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);
        response(results.slice(0, this.options.maxResults));
    }
});

jsFiddle:http ://jsfiddle.net/vqwBP/877/

これはコードの可読性と保守性に役立ちます!


10

これが私が使ったものです

.ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden;}

オーバーフロー自動なので、想定されていないときにスクロールバーが表示されません。


5

この問題を解決するには、CSSファイルに次のコンテンツを追加します。

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

回答として「感謝」を追加しないでください。彼らは実際には質問への答えを提供していません、そして将来の訪問者によってノイズとして知覚される可能性があります。代わりに、好きな回答に賛成投票してください。このようにして、質問の将来の訪問者はその回答の投票数が高くなり、回答者には評判ポイントが付与されます。投票が重要である理由をご覧ください。
jps 2017年

これはまさに私が探していたものです!結果の数を制限するのではなく、表示されるアイテムの数を制限します!thx
Serge insas 2017

なぜこの回答には賛成票がほとんどないのですか?何か問題がありますか?少なくとも一目で、私のために働いた。
Szybki

3

結果がmysqlクエリからのものである場合、mysql結果を直接制限する方が効率的です。

select [...] from [...] order by [...] limit 0,10

ここで、10は必要な行の最大数です


1
マウスを離すたびにDBをクエリするのはよくありません。一部のサーバーまたは巨大なDBでは遅くなる可能性があります。ちなみに投票はしませんでしたが、この説明を書きました。反対票を投じたときに何をすべきか。ありがとう。
エイドリアンP.

2

私は次の方法でそれをしました:

success: function (result) {
response($.map(result.d.slice(0,10), function (item) {
return {
// Mapping to Required columns (Employee Name and Employee No)
label: item.EmployeeName,
value: item.EmployeeNo
}
}
));

2

jQueryを使用すると、入力にオートコンプリートをアタッチするときにデフォルト設定を変更できます。

$('#autocomplete-form').autocomplete({
   maxHeight: 200, //you could easily change this maxHeight value
   lookup: array, //the array that has all of the autocomplete items
   onSelect: function(clicked_item){
      //whatever that has to be done when clicked on the item
   }
});


2

私は上記のすべての解決策を試しましたが、私の方法はこの方法でのみ機能しました:

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},


0

私の場合、これはうまくいきます:

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.