Bubble.io Tutorial - Datenbank Suche (Bonus: Fuzzy Search, Autocomplete) [Deutsch]

In diesem Video lernst du eine 🔍 Datenbank-Suche mit Bubble zu erstellen. Wir haben hierfür zwei Wege dargestellt:

• normale Suche mit Inputfeld
• Fuzzy Search mit Autocomplete mit kostenlosem Plugin von Zeroqode

Hier ist der Link zum Plugin: https://bubble.io/plugin/zq-fuzzy-search--autocomplete-1553006094610x835866904531566600##

Video Transkript

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir eine Suche in Bubble entwickeln können.
Hierfür gibt es zwei Möglichkeiten. Einmal eine einfache Suche mit etwas längerer Ladezeit und dann eine schnelle Suche mit dem Plug in Fuzzy Search. Ich habe die Daten schon mal vorbereitet. Wir haben hier eine User Datenbank mit verschiedenen Nutzern, durch die wir durchsuchen würden und verschiedenen Felder. Wir legen direkt mal los, indem wir ein Input Field erstellen. Wir nehmen den Placeholder "Suchen"    und machen hier alles standardmäßig mit dem Text. Darunter erstellen wir eine Repeating Group. Type of content User und als Data Source Do Search for User. Ohne Constraints. Wir haben vier Reihen und erstellen nun ein Textfeld. Und machen Current users Vorname. Kopieren dieses Feld. Abstand 20 Pixel. Nachname. Und Wohnort. Und um nun das Suchergebnis zu haben, müssen wir unter Conditionals gehen und sagen Wenn Input suchen's Value is not empty, dann ändern wir die data source zu Do a search for und fügen den Constraints hinzu any field. Input Suchen value.

Wir gehen jetzt einmal auf Preview, um uns das Ganze anzuschauen. Ihr seht, wir haben die ganze Datenbank an allem. Geben jetzt einmal Beispiel ein. Nach kurzer Zeit erhalten wir nun auch das Ergebnis. Können ein anderes Feld machen z.B. die Stadt. Erhalten das auch. Ihr merkte aber, dass das Ganze sehr langsam ist und wir müssen perfekt sein. Das heißt, wenn ich einen Rechtschreibfehler mache, erhalten wir kein Ergebnis.

Und deswegen gibt's einen zweiten Weg, um die Suche zu verbessern. Nämlich mit der sogenannten Fuzzy Search. Hierfür geht ihr auf Plugins und es gibt von Zeroqode das kostenlose Plugin Fuzzy Search und Auto Complete. Ich hab euch hier auch einmal den Link dazu bereitgestellt, den findet ihr in den Shownotes. Wir kopieren das Feld. Und ändern aber nun den Content, den Input Suche Fuzzy. Und wir kopieren auch einmal die Repeating Group.

Und ändern diese in Repeating Group Fuzzy Search. Die Texte behalten wir wie bei der einfachen Suche. Als nächstes fügen wir irgendwo auf dem Screen dieses Feld hinzu. Für Search und Autocorrect. Es ist später nicht sichtbar. Und fügen ein data type. Data source. Do a Search for users. Wir brauchen hier kein Constraints. Und führen die Field to Search ein. Wir wollen den Vornamen, den Nachnamen, die E-Mail und den Wohnort durchsuchen. Wir kreuzen die Option an Set text to match from an input box und brauchen nun eine Input Box ID. Als erstes hierfür müssen wir in Settings, Général, Expose the Option to add an ID Attribute. Wählen wir aus. Und wir nennen das nun searchbox. Ihr könnt das nennen wie ihr möchtet. Und fügen beim Input Field ebenfalls das ID Attribute searchbox hinzu. So dass diese beiden miteinander kombiniert werden können. Wir gehen in die Repeating Group, entfernen die Bedingungen der alten Gruppe und sagen wenn Input Suche Fuzzy value is not empty, dann nehmen wir Data Source. Und sehen hier Search& autocorrects A's Matches. Das heißt, wir machen kein Do a search for, sondern wir nehmen direkt aus diesem Plugin die Ergebnisse.

Ein weiterer Punkt ist nun, wenn wir in dem Search & Autocoorrect gehen, sehen wir diesen Treshold. Und wir haben unterschiedliche Möglichkeiten, hier genau den Algorithmus anzupassen. Bei 0 ist es extrem genau und es muss exakt passen. Bei 0,3 wird die Groß- und Kleinschreibung ignoriert. Bei 0,4 werden auch Umlaute und ähnliches ignoriert und bei 1 wird gar nichts ignoriert. Daher empfehle ich irgendwas zwischen 0,4 und 0,6. Ihr habt ihr auch andere Möglichkeiten noch das anzupassen, z.B. mit der Location oder Distanz bei Geodaten. Aber im Großen und Ganzen passt das. Wenn wir jetzt auf Preview gehen, haben wir hier erstmal alle Ergebnisse und sehen nun, wie schnell diese Fuzzy Search ist.

Bei 0,4 sehen wir, dass wir zum Beispiel, wenn wir Eichstaett mit ae eingeben, trotzdem das Ergebnis bekommen, oder wenn wir die Stadt Gartz Oder eingeben, erhalten wir auch ohne die Klammern trotzdem das Ergebnis. Somit konntet ihr sehen, wie wir unterschiedliche Möglichkeiten haben, in Bubble eine Suche zu erstellen. Für ganz Fortgeschrittene gibt es auch die Möglichkeit, mit den APIs von Algolia hier eine Suche zu erstellen. Ich denke, man hat auf jeden Fall gesehen, dass es möglich ist, die Datenbank in Bubble zu durchsuchen. Ich wünsche euch weiterhin viel Erfolg und auf bald.