ejemplo - Limitar los resultados en jQuery UI Autocomplete

jquery ui autocomplete css

Question

Estoy usando el autocompletado de jQuery UI.

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

El parámetro máximo no funciona y todavía obtengo más de 10 resultados. ¿Me estoy perdiendo de algo?

Answer 1

Añadiendo a la respuesta de Andrew , incluso puede introducir una propiedad maxResults y usarla de esta manera:

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

¡Esto debería ayudar a la legibilidad y mantenimiento del código!

Answer 2

Aquí está la documentación adecuada para el widget jQueryUI . No hay un parámetro incorporado para limitar los resultados máximos, pero puede lograrlo fácilmente:

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

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

Puede suministrar una función al parámetro source y luego llamar a slice en la matriz filtrada.

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/andrewwhitaker/vqwBP/

Answer 3

Complemento: jquery-ui-autocomplete-scroll con scroller y los resultados límite son hermosos

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

Answer 4

En mi caso, esto funciona bien:

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

Answer 5

He intentado todas las soluciones anteriores, pero el mío solo funcionó de esta manera:

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

Answer 6

Lo hice de la siguiente manera:

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
}
}
));

Answer 7

Lo mismo que "Jayantha" dijo que usar css sería el enfoque más fácil, pero podría ser mejor,

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

Tenga en cuenta que la única diferencia es "altura máxima". esto permitirá que el widget cambie su tamaño a una altura menor, pero no más de 200 px

Answer 8

No hay un parámetro max.

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

Answer 9

Podría resolver este problema agregando el siguiente contenido a mi archivo CSS:

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

Answer 10

Puede establecer la opción minlength a algún valor grande o puede hacerlo por css como este,

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

Answer 11

Si los resultados provienen de una consulta de mysql, es más eficiente limitar directamente el resultado de mysql:

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

donde 10 es el número máximo de filas que desea

Answer 12

aquí es lo que usé

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

El desbordamiento automático por lo que la barra de desplazamiento no se mostrará cuando no se supone que lo haga.

Answer 13

jQuery le permite cambiar la configuración predeterminada cuando está adjuntando autocompletar a una entrada:

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