それで、あなたは@mentionオートコンプリート機能を構築したいですか？

AutoCompleteは馴染みのある機能です。検索ボックスに入力すると、提案が表示されます。 eコマースでは一般的ですが、タイピングの強化としての使用はしばしば見落とされます。

最新のWebアプリは、単純なテキスト領域を超えて移動しています。 Twitter、Slack、概念などのソーシャルおよび生産性のプラットフォームは、「@mention」パターンを利用して、「@」や「＃」などのトリガーを使用して他の人を参照できるようにします。これにより、提案パネルを提供することでタイピングエクスペリエンスが向上し、キーボードを離れることなく迅速に参照できます。

このパターンは、ユーザー生成コンテンツの一貫性を高めます。たとえば、ハッシュタグは、自由形式のテキスト内で半構造化されたデータを作成し、コンテンツの分類を支援します。言及は、アプリリソース全体で接続グラフを作成し、コンテンツの推奨事項とユーザーの動作分析を簡素化します。

ライブデモを参照してください私たちがそれをどのように構築したかを参照

成功した@mentionオートコンプリートはシームレスでなければなりません。それは、あなたが入力するときに学習するが、いつ脇に出るべきかを知っている、役立つアシスタントとして機能します。ユーザーは提案を無視したり、入力を簡単に使用したりすることができます。

Twitterの実装は、タイプされた単語が有効なトークンではなくなったときにパネルを閉じます（たとえば、スペースの後、ハンドルがスペースが含まれていないため）。 Slackのアプローチはより柔軟であり、異なるヒューリスティックを使用してユーザーの意図を検出するために、フルネーム検索のスペースを可能にします。

選択すると、Twitterはパネルを閉じ、言及を挿入し、継続的なタイピングのためのスペースを追加します。この一見小さな詳細は、流動的なユーザーエクスペリエンスに貢献しています。

言及が追加されると、インタラクティブになります。 Twitterでは、矢印キーをクリックまたは使用して言及を選択し、パネルの再び開き、編集を可能にし、送信時に正しい通知を確保します。

オープンソースのオートコンプリートライブラリは、このプロセスを簡素化します。 Algoliaには理想的には適していますが、任意のデータソースで動作し、マルチソースのアクセスしやすいオートコンプリート機能の構築を容易にします。

提案タイプの組み合わせ

明確なシンボルを使用する（例：「@"for people"、 "＃" for hashtags）は、明確に定義された少数のタイプでうまく機能します。ただし、より多くの異なるタイプがある場合、ユーザーはすべてのシンボルを覚えるのに苦労する場合があります。

Federated Search（Multi-Source）により、シンボルごとに複数のタイプを割り当てることができ、多数のパターンを持つユーザーを圧倒することなく発見可能性を向上させます。

Slackは提案を混合し、視覚的に区別します（アイコン、バッジ）。概念グループタイプ（日付、人、リンク）による提案、一貫性とユーザーの筋肉の記憶を促進します。このグループ化は、AutoCompleteのReshape APIなどのマルチソースクエリまたはツールを通じて実現できます。

また、概念は、動的なプレースホルダー、ユーザーがブラウズするように更新する予測提案を利用して、各提案に関連付けられたアクションを明確にします。 CSSカスタムプロパティとJavaScriptを巧みに使用してこれを実現します。

複数のソースから結果の数を管理することは困難な場合があります。スクロールバーを備えた固定高さのパネルまたは組み合わせ/制限メカニズム（AutoCompleteのReshape APIなど）は、これに対処できます。

基本的な検索を超えて拡大します

@mentionパターンの汎用性は、典型的な実装を超えています。 Slackの絵文字検索（ "："を使用）と概念のアクション挿入（ "/"）も同様のメカニズムを使用します。特別な文字は提案パネルを開き、選択とアプリケーションを可能にします。

概念のアプローチは、カスタムアイテムテンプレートとスタイリングを通じてパターンの適応性を強調しています。これにより、さまざまなアプリに馴染みのある流動的な体験が生まれます。

タイプの完了を超えてデモ###を参照してください

言及はタイピングを強化しますが、構成ボックスは会話型インターフェイスとして機能します。概念の「/」ショートカットはアクション挿入をトリガーし、特定のタイプの新しいブロックを作成します。

ゲームで普及したこの「スラッシュコマンド」パターンは、SlackやDiscordなどのアプリで標準になっています。一般的なタスクを集中させ、摩擦と認知負荷を軽減します。たとえば、「/Zoom」コマンドは、ズームミーティングの開始と共有を簡素化することです。

以前はパワーユーザーに限定されていたスラッシュコマンドは、より一般的でユーザーフレンドリーになりつつあります。タイピングエクスペリエンスを増強することは、複雑な機能を追加することではなく、適切な情報を適切なタイミングで提供し、認知負荷を削減し、ユーザーエクスペリエンスの向上です。

デモを参照してください

以上がそれで、あなたは@mentionオートコンプリート機能を構築したいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。