✔ js + Ajax + Textfeld + Menge der Vorschläge

[{Eve}]

Hallo,

ihr kennt ja alle diese Textfelder auf Webseiten, in denen man irgendwas eingibt und
es erscheint eine Combobox mit verschiedenen Vorschlägen zu der aktuellen Eingabe.

Ich habe das erstellt, aber ich habe keine Erfahrung mit der Menge die in dem
DropDown dargestellt werden kann.
Wie ist da eure Erfahrung so?

Ich meine im Moment fülle ich das DropDown mit Informationen aus einer DB und
meine Menge liegt bei ein paar Tausend bei dem ersten eingegebenen Zeichen (es
soll schon bei dem ersten Zeichen Vorschläge liefern).
D.h. das Problem ist, das es eindeutig zu langsam ist, da es bei jedem Knopfdruck
einen AjaxRequest absetzt um die Informationen zu holen.

Hat jemand vielleicht einen Vorschlag um es zu beschleunigen?

 

[Sven Mintel]

Moin Eve,

wenn die Eingabe eines einzelnen Zeichens mehrere Tausend Treffer liefert, dann kann man diese Treffer, um es mal mit den Worten von Cpt. Janeway zu Sagen, als "irrelevant" bezeichnen.

Auch bietet die Anzeige dieser Treffer dem User keinerlei Nutzen, denn die Auswahl aus einer solchen Liste wird mehr Zeit erfordern, als die Eingabe eines weiteren Zeichens.

Daher kann ich nur folgenden Vorschlag anbringen: setze das Zeichenlimit höher.

 

[dadom110]

Daher kann ich nur folgenden Vorschlag anbringen: setze das Zeichenlimit höher.

Dem kann ich nur zustimmen. Habe erst vor kurzem eine deratige Funktion bei einem Projekt eingesetzt und habe die Trefferliste auf 25 Treffer begrenzt (wobei als 26er Eintrag dann eine Information angezeigt wurde, allá "weitere Treffer vorhanden, bitte weiter Einschränken").

Technisch:
Bei mir lag die Anzahl der Wert bei ca 1000, sodass ich die gesamten Werte nur einmal von der Datenbank gelesen habe und die Filterung per Javascript über Regex durchgeführt habe, weil ich zum einen die Datenbank nicht zu stark belasten wollte und die lokale Filterung sicherlich performanter ist.

Viele Grüße
D

 

[{Eve}]

k, ab ersten Zeichen zu suchen ist wahrscheinlich wirklich übertrieben, aber mindestens ab dem zweiten.

@dadom110

Bei mir lag die Anzahl der Wert bei ca 1000, sodass ich die gesamten Werte nur einmal von der Datenbank gelesen habe und die Filterung per Javascript über Regex durchgeführt habe, weil ich zum einen die Datenbank nicht zu stark belasten wollte und die lokale Filterung sicherlich performanter ist.

Das hört sich sehr interessant an. In welchem Format hast du die Daten abgefragt/ "gesammelt"? Xml oder csv- ähnlich oder anderes?
Dieses regex, ich nehme an das ist eine String- Funktion die in JavaScript enthalten ist, so wie man das auch von Java her kennt oder?
Soweit ich weiß könnte ich dann auch Konstrukte wie "%irgendwas%" (so wie das auch in Sql verwendet wird) bauen oder?

 

[dadom110]

Das hört sich sehr interessant an. In welchem Format hast du die Daten abgefragt/ "gesammelt"? Xml oder csv- ähnlich oder anderes?

Das Format liegt Dir an der Stelle ja völlig frei, hängt auch damit zusammen in welchem Umfang du die Daten in Javascript zur Verfügung haben willst. Wenn es sich wirklich nur um eine einfache Werteliste handelt finde ich XML und sogar JSON etwas zu umfangreich, sodass sich bei so was einfache Zeichen-Getrennte Listen anbieten. Die Listen kannst du Dir dann entweder per Serversprache (PHP,JSP) direkt in die Seite generrieren (das fällt wohl in die Rubrik Quick&Dirty, weil du JavaScript Arrays an der Stelle zusammenstringen musst, die du direkt in die Seite schreibst) oder eben per asyncronen Request per Ajax.

Dieses regex, ich nehme an das ist eine String- Funktion die in JavaScript enthalten ist, so wie man das auch von Java her kennt oder?
Soweit ich weiß könnte ich dann auch Konstrukte wie "%irgendwas%" (so wie das auch in Sql verwendet wird) bauen oder?

Genau so, die Regex in diesem Fall wäre die einfachste die man sich vorstellen kann, wobei Regex ja belieblich Kompliziert werden können

So sieht das ganze bei mir dann aus, weil ich kein einfaches Dropdown habe, sondern die Liste die vorgeblendet wird, enthält Nummer und Bezeichnung, die man beide eingeben kann:

if (lief[1].toUpperCase().match(ele.value.toUpperCase()) || lief[0].match(ele.value)

allgemein also, in einer Schleife über alle Elemente der Vorschauliste:
[LISTENELEMENT].toUpperCase().match([EINGABE].toUpperCase())

Wenn "true" dann in die Vorschauliste mit aufnehmen, und daraus dann eine Liste mit Links generrieren die du am Textfeld anzeigst.

Hoffe geholfen zu haben
D

 

[{Eve}]

Hoffe geholfen zu haben

Ja vielen dank, das war klasse

Werde ich dann die Tage mal ausprobieren.