web-dev-qa-db-ja.com

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

JQuery UI Autocompleteを使用しています。

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

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

jquery-uiautocompletejquery-ui-autocomplete
120
santhosh

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/

260
Andrew Whitaker

minlengthオプションを大きな値に設定するか、次のようなcssで設定できます。

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

「Jayantha」と同じように、cssを使用するのが最も簡単なアプローチですが、これはより良いかもしれませんが、

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

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

23
Sam Battat

Andrewの答え に追加すると、introducemaxResultsプロパティを使用して次のように使用できます。

$("#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/

これは、コードの可読性と保守性に役立つはずです！

19
SNag

ここに私が使用したものがあります

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

オーバーフローオートなので、予期しないときにスクロールバーが表示されません。

10
Desto

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

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

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

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

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

3
the_nutria

私は上記のすべての解決策を試しましたが、私の方法はこの方法でしか働きませんでした：

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

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
myjeeed

プラグイン： jquery-ui-autocomplete-scroll スクロール機能と制限結果が美しい

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});
2
KingRider

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

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
AH Jamali

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

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},
0
tlberio

Maxパラメーターはありません。

http://docs.jquery.com/UI/Autocomplete

0
dteoh