Limitare i risultati nel completamento automatico dell'interfaccia utente jQuery


126

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?


11
Non esiste alcuna opzione chiamata maxin completamento automatico
Jayantha Lal Sirisena,

Risposte:


272

Ecco la documentazione corretta per il widget jQueryUI . Non esiste un parametro integrato per limitare i risultati massimi, ma puoi realizzarlo 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 sourceparametro e quindi chiamare slicel'array filtrato.

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


7
Funziona come un fascino. È molto utile se l'elenco di completamento automatico è molto lungo (~ 10k risultati) e rallenta il rendering HTML.
Benjamin Crouzier,

Grazie mille per questo! Ora posso consentire agli utenti di avere un elenco enorme di localStorage, ma il sito Web sembra molto veloce! Bello! : D grazie mille per questo! : D così felice che sono felice di trovare questa soluzione ^ __ ^
Alisso,

cosa succede se uno ha due caselle di completamento automatico sulla stessa pagina? Quando eseguo lo slice di risposta su entrambi, entrambi smettono di tagliare a tutti: /
Alisso,

+1 per questa soluzione. Aggiungerò minLength: 3 per restringere maggiormente i risultati. jsfiddle.net/vqwBP/295
Adrian P.

2
Nella jsFiddle la soluzione fornita, cambia il valore dello slice da 10 a 3 e quindi nella casella di input, inserisci il carattere C. Riceverai solo 3 valori che a un utente finale potrebbero farli credere che siano gli unici tre valori disponibili e potrebbe non continuare a inserire caratteri. Tutto ciò che sto suggerendo è di fornire un buon testo di aiuto per accompagnare questa soluzione (ad es. Verranno visualizzati solo i primi 20 risultati corrispondenti. Continua a digitare per perfezionare i risultati. "Qualcosa del genere.
HPWD

45

Puoi impostare l' minlengthopzione su un valore elevato o puoi farlo tramite CSS in questo modo,

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

Genio. Adoro la semplicità di questo e consente all'utente di decidere.
denislexic

18
Questo è abbastanza confuso. Se hai un elenco davvero lungo e il completamento automatico restituisce migliaia di corrispondenze, sarà dannatamente lento ...
Vajk Hermecz,

1
D'accordo con Vajk. Questa è una soluzione scadente dal punto di vista della scalabilità.
Kiksy,

4
D'accordo con Vajk. Non giocare con CSS quando il gioco è in JS.
Adrian P.

Ho fatto la stessa cosa nella mia applicazione del dizionario. È degno!
Moxet,

25

Lo stesso che "Jayantha" ha detto che usare i CSS sarebbe l'approccio più semplice, ma questo 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 ridimensionare a un'altezza inferiore ma non superiore a 200 px


4
Per la tua soluzione. Anche se è valido stiamo discutendo le soluzioni jQuery. Offrire una soluzione CSS a un programmatore non è una buona idea quando il problema può essere risolto in jQuery. E alla fine questo è solo mascherare i risultati non risolvendo il problema come nella risposta accettata. Ecco qui!
Adrian P.

3
@SamBattat L'utilizzo di CSS per un problema di programmazione è un attacco orribile. Immagina di provare a eseguire il debug di questo!
Christian Payne,

19

Aggiungendo alla risposta di Andrew , puoi persino introdurre una maxResultsproprietà e usarla in questo modo:

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

Ciò dovrebbe aiutare la leggibilità e la manutenibilità del codice!


10

ecco quello che ho usato

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

L'overflow automatico quindi la barra di scorrimento non mostrerà quando non dovrebbe.


5

Ho potuto risolvere questo problema aggiungendo il seguente contenuto al mio file CSS:

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

Si prega di non aggiungere "grazie" come risposte. In realtà non forniscono una risposta alla domanda e possono essere percepiti come rumore dai suoi futuri visitatori. Invece, rispondi alle risposte che ti piacciono. In questo modo i futuri visitatori della domanda vedranno un voto più elevato contare su quella risposta e anche il rispondente sarà premiato con punti reputazione. Vedi Perché il voto è importante .
jps,

questo è esattamente quello che stavo cercando! non limitando il numero di risultati ma il numero di elementi shwn! grazie
Serge insas,

Perché questa risposta ha così pochi voti? C'è qualcosa che non va? Ha funzionato per me, almeno a prima vista.
Szybki,

3

Se i risultati provengono da una query mysql, è più efficiente limitare direttamente il risultato mysql:

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

dove 10 è il numero massimo di righe desiderato


1
Non va bene interrogare un DB ad ogni passaggio del mouse! Può essere lento su alcuni server o DB di grandi dimensioni. A proposito, non ho votato verso il basso ma ho scritto questa spiegazione. Cosa dovrebbero fare le persone quando votano verso il basso. Grazie.
Adrian P.

2

L'ho fatto nel modo seguente:

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


2

Ho provato tutte le soluzioni sopra, ma la mia ha funzionato solo in questo modo:

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


0

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,
                }
            }
        })
    );
},
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.