Autocomplete mit Suchindex als Quelle

Hallo zusammen,

ich möchte das Sucheingabefeld mit einer Autovervollständigung versehen, die sich aus der Tabelle tl_search_index speist (oder ist das ein Denkfehler?).

Trotz intensiver Suche hab ich keine elegante Lösung "out of the box" gefunden.
Da diese Funktion doch häufig zu finden ist, möchte ich euch fragen, wie ihr das löst.

Ich habe das Modul https://github.com/heimrichhannot/co...pletejs-bundle gefunden, mir ist aber nicht klar, welches DCA ich da genau für die Suche anpassen muss. Und wie ich die Quelle auf den Suchindex erstelle.

Hab auch selbst mit JQuery UI probiert, aber das Ergebnis ist recht unbefriedigend, da alle möglichen Wörter (auch sowas wie mein_dateiname.pdf) mit als Suchvorschlag ausgegeben wird. Und ich frage mich, wie man sowas normalerweise elegnat löst.

Würde mich freuen, wenn ihr mir ein paar Denkanstöße geben könnt.

Danke und viele Grüße
Silvia

Hi,

was ist dem mit dem ganz einfachen Ansatz im Template:

https://www.w3schools.com/tags/att_input_list.asp

Interessanter Ansatz, danke.

Allerdings steht in der Referenz, dass man 50 Werte in der Liste nicht überschreiten sollte.
Wenn ich die Datalist mit Werten aus der tl_search_index fülle, werden das ja definitiv mehr. Bzw. müsste ein Script (Ajax?) die Datalist nach jedem neuen Buchstaben wieder aktualisieren, oder?
Wie würde man das kombinieren?

Und die unschönen Dateinamen oder Begriffe mit Unterstrichen werden auch mit in so eine Liste gefüllt.

Gibt es noch andere Ansätze?

Zitat:

---

Zitat von landzone

Ich habe das Modul https://github.com/heimrichhannot/co...pletejs-bundle gefunden, mir ist aber nicht klar, welches DCA ich da genau für die Suche anpassen muss. Und wie ich die Quelle auf den Suchindex erstelle.

---

Bei "DCA" würde ich per se erstmal vom Backend ausgehen und nicht vom Frontend...

Bei MM gibt es eine Suche mit Levenshtein und Autovervollständigung - siehe https://github.com/MetaModels/attribute_levensthein
In MM 2.2 (noch nicht freigeschaltet) auch ohne jQuery als "Vanilla Script".

ggf. kannst Du von dort etwas abgucken...

@zonky Danke, aber da steig ich nicht wirklich durch. ;-)

Ich hab jetzt selbst weitergebaut, und zwar hab ich eine php-Datei erstellt, die ein DB SELECT auf die tl_search_index ausführt und die Ergebnisse als JSON-Liste zur Vefügung stellt.

PHP-Code:

---

$result = \Database::getInstance()->execute("SELECT DISTINCT word FROM tl_search_index WHERE word LIKE '".$this->keywords."%' AND language = 'de' ORDER BY relevance DESC"); 


---

Im Suchformular hab ich JQuery UI integriert und starte das autocomplete so:

PHP-Code:

---

    $('#ctrl_keywords').autocomplete({ // ID des Inputfeldes
    source: quell, // Dateiname der externen php-Datei
    minLength: 3 
    }); 


---

Was noch nicht so schön ist: In dem Moment, so die DB-Afrage ausgeführt wird, hat das Script nicht wirklich den aktuellen Inhalt der Variable $this->keywords, da diese ja erst nach dem Absenden gefüllt wird. Wi ekönnte man das lösen?
Oder müsste man mit JS noch die Eingabe überwachen? Hab sowas wie eine Funktion keyup gefunden, aber wie erfährt die PHP-Datei davon?

Vielleicht hat noch jemand eine Anregung.

an dem Ding hat Richard mit gebaut - ggf. den mal fragen...

Hier nun meine Lösung als Zusammenfassung:

Ich bin davon abgekommen, den kompletten Suchindex abzufragen, da ich nur eine Teilmenge davon brauche.
Also hole ich mir die Daten aus einer selbst angelegten Tabelle (die von Redaktueren gepflegt wird) und speichere sie per Cronjob in einer json als Suchvorschläge.

Im Template löst die Zuweisung der Klasse autocomplete auf das Suchfeld das nötige Javascript aus (hier nun schlussendlich awesomplete https://projects.verou.me/awesomplete/).
Dem Formular wird dabei das generierte json für Vorschläge zugewiesen.

HTML-Code:

---

<form method="get" data-suggest="./searchjson/search.json">
...
<input class="input autocomplete" type="search" name="keywords" >

---

Thats it, klingt jetzt gar nicht so aufwendig, aber mein Weg dahin war doch recht steinig. ;-)