jquery-ui ui - Limita i risultati nel completamento automatico dell'interfaccia utente jQuery




7 Answers

Ecco la documentazione corretta per il widget jQueryUI . Non esiste un parametro predefinito per limitare i risultati massimi, ma puoi farlo facilmente:

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

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

È possibile fornire una funzione al parametro source e quindi chiamare slice sull'array filtrato.

Ecco un esempio funzionante: http://jsfiddle.net/andrewwhitaker/vqwBP/

autocomplete option

Sto usando il completamento automatico dell'interfaccia utente jQuery.

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

Il parametro max non funziona e ottengo ancora più di 10 risultati. Mi sto perdendo qualcosa?




Lo stesso di "Jayantha" ha detto che usare i CSS sarebbe l'approccio più semplice, ma potrebbe essere migliore,

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

Nota l'unica differenza è "altezza massima". ciò consentirà al widget di ridimensionarsi a un'altezza minore ma non superiore a 200 px




ecco cosa ho usato

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

L'overflow automatico in modo che la barra di scorrimento non venga visualizzata quando non è previsto.




Plugin: jquery-ui-autocomplete-scroll con scroller e limit i risultati sono belli

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



jQuery consente di modificare le impostazioni predefinite quando si collega il completamento automatico a un input:

$('#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
   }
});






Nel mio caso funziona bene:

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



Related