Filtro elenco grande con javascript

Question

Ho una lista molto grande di elementi (14000+), voglio avere un campo di ricerca che mentre si digita il testo in esso, filtra i risultati e nasconde gli elementi non correlati.

Attualmente sto usando questo:

$.expr[':'].containsIgnoreCase = function (n, i, m) { 
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
}; 
$("#search").on("keyup", function() { 
    var filter = $("#search").val(); 
    $(".list-group-item").not(":containsIgnoreCase('" + filter + "')").addClass("hidden"); 
    $(".list-group-item:containsIgnoreCase('" + filter + "')").removeClass("hidden"); 
}); 

Quale funziona meravigliosamente ... sulle liste più piccole. Questa lista è semplicemente troppo grande per essere gestibile con quel codice.

Non so se esiste un altro codice in grado di gestire questo lato client di molti elementi. In caso contrario, sarebbe meglio lasciare la lista vuota e fare una richiesta ajax per compilare la lista mentre le corrispondenze sono fatte?

Answer 1

Penso che ci siano molti modi possibili per ottimizzare la ricerca ma se decidi di usare il codice come mostrato nella domanda o usi le chiamate ajax ti suggerirei come un miglioramento per ridurre il numero di chiamate alla funzione di ricerca usando throttle/debounce. Ciò impedirà che la ricerca venga chiamata dopo ogni tratto di chiave, ma ritarda invece l'esecuzione della ricerca con un numero di millisecondi dopo l'ultimo tratto di chiave. Ad esempio il codice di cui sopra può essere modificato come segue:

function searchFunction() { 
    var filter = $("#search").val(); 
    $(".list-group-item").not(":containsIgnoreCase('" + filter + "')").addClass("hidden"); 
    $(".list-group-item:containsIgnoreCase('" + filter + "')").removeClass("hidden"); 
} 
$("#search").on("keyup", $.debounce(searchFunction, 300)); 

Ci sono molte implementazioni open source di funzione antirimbalzo oltre la rete, ma nell'esempio precedente ho usato jquery-debounced. Per vedere come funziona, per favore controlla questo jsfiddle. Un'altra implementazione è disponibile in underscore.js library. Inoltre ho trovato un bel article su questo argomento.