Wenn ich ein großes JavaScript-String-Array mit über 10.000 Elementen habe, Wie suche ich schnell durch?
Im Moment habe ich ein JavaScript-String-Array, das die Beschreibung eines Jobs speichert, und ich erlaube dem Benutzer, die zurückgegebene Liste dynamisch zu filtern, während sie in ein Eingabefeld eingeben.
Also sage ich, dass ich ein String-Array habe:
var descArr = {"flipping burgers", "pumping gas", "delivering mail"};
und der Benutzer sucht nach: "p"
Wie würde ich in der Lage sein, ein String-Array mit 10000 Beschreibungen schnell zu durchsuchen?
Offensichtlich kann ich das Beschreibungsfeld nicht sortieren, da sie Beschreibungen sind, so dass die binäre Suche aus ist. Und da der Benutzer nach "p" oder "pi" oder einer beliebigen Buchstabenkombination suchen kann, bedeutet diese partielle Suche, dass ich keine assoziativen Arrays verwenden kann (d. H.% Co_de%).
um die Suche zu beschleunigen.
Irgendwelche Ideen jemand?
Da reguläre Ausdrucksmaschinen in aktuellen Browsern in Sachen Geschwindigkeit verrückt werden, wie wäre es damit? Statt eines Arrays einen gigantischen String passieren und die Wörter mit einem Identifikator trennen. Beispiel:
"flipping burgers""pumping gas""delivering mail"
"([^"]*ping[^"]*)"
Mit dem Schalter /g für global erhalten Sie alle Treffer. Stellen Sie sicher, dass der Benutzer nicht nach dem Zeichenfolgentrennzeichen sucht.
Sie können sogar eine ID in die Zeichenfolge einfügen, beispielsweise:
"11 flipping burgers""12 pumping gas""13 delivering mail"
Regex: "(\d+) ([^"]*ping[^"]*)"
Beispiel: Ссылка (30000 Zeichenfolgen, Ergebnisse auf 100 beschränken)
Es gibt keine Möglichkeit, eine initiale Array-Suche zu beschleunigen, ohne einige Änderungen vorzunehmen. Sie können aufeinanderfolgende Suchvorgänge beschleunigen, indem Sie Ergebnisse zwischenspeichern und dynamisch Mustern zuordnen.
1.) Passen Sie Ihr Datenformat an. Dies macht die anfänglichen Suchvorgänge etwas schneller. Grundsätzlich, Sie precache.
%Vor%2.) Setup-Cache-Mechanik.
%Vor%3.) Verwenden Sie das folgende Skript, um ein Precache-Objekt zu erstellen. Ich schlage vor, dass Sie dies einmal ausführen und JSON.stringify verwenden, um ein statisches Cache-Objekt zu erstellen. (oder tun Sie dies auf dem Backend)
%Vor%Wahrscheinlich ein bisschen mehr Code, als Sie erwartet haben, aber Optimalisierung und Leistung sind nicht kostenlos.
Dies ist vielleicht keine Antwort für Sie, da ich einige Annahmen über Ihr Setup mache, aber wenn Sie serverseitigen Code und eine Datenbank haben, wäre es viel besser, einen AJAX-Call zurück zu machen, um den Cut zu bekommen down Liste der Ergebnisse, und mit einer Datenbank, um die Filterung (wie sie sind sehr gut in dieser Art von Sache).
Neben dem Datenbankvorteil profitieren Sie auch davon, dass Sie nicht so viele Daten (10000 Variablen) an ein webbasiertes Frontend ausgeben - wenn Sie nur die benötigten Daten zurückgeben, sparen Sie ein gutes Stück Bandbreite .
Ich kann das Problem nicht reproduzieren, ich habe eine naive Implementierung erstellt, und die meisten Browser durchsuchen über 10000 15 Zeichenfolgen in einer einstelligen Anzahl von Millisekunden. Ich kann nicht in IE6 testen, aber ich würde es nicht mehr als 100 Mal langsamer als die schnellsten Browser glauben, die immer noch praktisch sofort sein würden.
Probieren Sie es selbst aus: Ссылка (Beachten Sie, dass die Erstellungszeit für das Problem nicht relevant ist, das ist einfach Dort um Daten zu bekommen, an denen gearbeitet wird.)
Eine Sache, die Sie falsch machen könnten, ist, alle Ergebnisse zu rendern, das wäre eine ziemlich große Aufgabe, wenn der Benutzer nur einen einzelnen Buchstaben oder eine gemeinsame Buchstabenkombination eingegeben hätte.
Ich schlage vor, eine fertige JS-Funktion auszuprobieren, zum Beispiel die autocomplete von jQuery. Es ist schnell und es hat viele Optionen zu konfigurieren.
Sehen Sie sich die jQuery-Autocomplete-Demo
anTags und Links javascript string arrays search