Sie möchten also eine @mention AutoComplete -Funktion erstellen?

AutoComplete ist eine vertraute Funktion: Geben Sie in ein Suchfeld ein, und Vorschläge werden angezeigt. Obwohl sie im E-Commerce üblich sind, wird die Verwendung als Schreibverstärkung häufig übersehen.

Moderne Web -Apps bewegen sich über einfache Textbereiche hinaus. Soziale und Produktivitätsplattformen wie Twitter, Slack und Begriff verwenden das Muster "@mention", sodass Benutzer andere mit Triggern wie "@" oder "#" verweisen können. Dies verbessert das Schreiberlebnis, indem ein Vorschlagsfeld bereitgestellt wird, wodurch ein schnelles Verweisen ermöglicht wird, ohne die Tastatur zu verlassen.

Dieses Muster steigert die Konsistenz im benutzergenerierten Inhalt. Hashtags erstellen beispielsweise semi-strukturierte Daten in freien Text und Unterstützung bei der Kategorisierung von Inhalten. Erwähnungen erstellen Verbindungsdiagramme für App -Ressourcen, Vereinfachung von Inhaltsempfehlungen und Benutzerverhaltensanalyse.

Siehe Live -Demo Sehen Sie, wie wir es gebaut haben.

Eine erfolgreiche automatische Vervollständigung von @mention sollte nahtlos sein. Es fungiert als hilfreicher Assistent, lernt beim Eingeben, weiß aber, wann sie beiseite treten sollen. Benutzer können Vorschläge ignorieren oder sie einfach verwenden, um ihre Eingaben zu vervollständigen.

Die Implementierung von Twitter schließt das Panel, wenn das getippte Wort kein gültiges Token mehr ist (z. B. nach einem Raum, da die Griffe keine Leerzeichen enthalten). Der Ansatz von Slack ist flexibler und ermöglicht Räume für Vollnamensuche, wobei verschiedene Heuristiken verwendet werden, um die Benutzerabsicht zu erkennen.

Bei der Auswahl schließt Twitter das Panel, fügt die Erwähnung ein und fügt einen Platz zum weiteren Tippen hinzu. Dieses scheinbar kleine Detail trägt zu einer fließenden Benutzererfahrung bei.

Erwähnt, sobald hinzugefügt wird, werden interaktiv. Auf Twitter wird das Panel wieder geöffnet, um eine Erwähnung auszuwählen oder zu verwenden, um eine Erwähnung auszuwählen, wodurch das Bearbeiten und die korrekte Benachrichtigung beim Senden sichergestellt werden kann.

Die Open-Source-Automobile-Bibliothek vereinfacht diesen Prozess. Obwohl es für Algolien ideal geeignet ist, arbeitet es mit jeder Datenquelle zusammen und erleichtert die Erstellung von Multi-Source-und zugänglichen Autokapitalfunktionen.

Vorschläge kombinieren

Die Verwendung verschiedener Symbole (z. B. "@" für Menschen "#" für Hashtags) funktioniert gut mit wenigen, klar definierten Typen. Bei mehr oder weniger unterschiedlichen Typen können Benutzer jedoch Schwierigkeiten haben, sich an alle Symbole zu erinnern.

Die Federated Search (Multi-Source) ermöglicht das Zuweisen mehrerer Typen pro Symbol und Verbesserung der Entdeckbarkeit ohne überwältigende Benutzer mit zahlreichen Mustern.

Slack mischt Vorschläge, differenzieren sie visuell (Ikonen, Abzeichen). Die Vorschläge für Gruppen gruppieren Vorschläge nach Typ (Daten, Personen, Links), Förderung der Konsistenz und des Benutzer -Muskelgedächtnisses. Diese Gruppierung kann durch Multi-Source-Abfragen oder Tools wie die Umreshape-API von AutoComplete erreicht werden.

Der Begriff verwendet auch dynamische Platzhalter, prädiktive Vorschläge, die als User -Browse aktualisieren und die mit den einzelnen Vorschlägen verbundenen Aktionen klären. Sie verwenden CSS -benutzerdefinierte Eigenschaften und JavaScript geschickt, um dies zu erreichen.

Das Verwalten der Anzahl der Ergebnisse aus mehreren Quellen kann eine Herausforderung sein. Ein Panel mit fester Höhe mit einer Bildlaufleiste oder mit der Kombination von Mechanismen (wie der Umstellung von AutoComplete-API) kann dies ansprechen.

Erweitern Sie über die grundlegende Suche hinaus

Die Vielseitigkeit des @mention -Musters geht über seine typische Implementierung hinaus. Die Emoji -Suche von Slack (mit ":") und der Aktionsinsertion ("/") verwenden ähnliche Mechanismen: Ein spezielles Zeichen öffnet ein Vorschlagsfeld, das Auswahl und Anwendung ermöglicht.

Der Ansatz des Begriffs unterstreicht die Anpassungsfähigkeit des Musters durch benutzerdefinierte Elementvorlagen und Styling. Dies schafft eine vertraute und flüssige Erfahrung in verschiedenen Apps.

Siehe Demo ### Über die Typ -Fertigstellung hinaus

Während Erwähnungen die Typisierung verbessern, können Kompositionsboxen als Konversationsschnittstellen fungieren. Die "/" -Knorteilsverknüpfung löst die Aktionseinfügung aus und erstellt neue Blöcke eines bestimmten Typs.

Dieses "Slash -Befehl" -Muster, das in Gaming populär ist, ist jetzt in Apps wie Slack und Discord Standard. Es zentralisiert gemeinsame Aufgaben und reduziert die Reibung und die kognitive Belastung. Beispielsweise vereinfacht ein "/Zoom" -Befehl das Initiierungs- und Teilen von Zoom -Meetings.

Zuvor auf Power Users beschränkten sich Slash-Befehle immer häufiger und benutzerfreundlicher. Bei der Erweiterung des Tipperlebnisses geht es nicht um das Hinzufügen komplexer Funktionen, sondern um die Bereitstellung der richtigen Informationen zur richtigen Zeit, die Reduzierung der kognitiven Belastung und die Verbesserung der Benutzererfahrung.

Siehe Demo

Das obige ist der detaillierte Inhalt vonSie möchten also eine @mention AutoComplete -Funktion erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!