構築しているアプリケーションに@mentionシステムを実装しようとしていますが、いくつかの問題が発生しています。
私の最初のアプローチはこれです：
textarea / inputが@mentionifiedされた後、2つの非表示の入力を作成します。1つ目は、検索対象のテキストを保持します（オートコンプリートの場合）。2つ目は、@ [objectId：text]の形式で見つかったメンションを保持します。
これは、人が考えるよりも実践するのが難しいです。誰かが@記号を押すと、後続のテキストをオートコンプリートにフィードし始める必要があります。@記号とカーソルの間のテキストのみを取得する必要があります。入力の他の部分にカーソルをクリックして何かを編集してから、戻って@テキストを編集するとどうなりますか。スクリプトは、ユーザーが@記号の直後のテキストを更新しているときにのみオートコンプリートを検索できるように、十分にスマートである必要があります。
これを実装するための最良の方法についての考えは？すでにこれを行っているプラグインはありますか？
私はこれを使用します：https ：//github.com/podio/jquery-mentions-input
これがデモです。お役に立てばと思います。
編集：
上記のプラグインはもう維持されていません。このプラグイン（Ivan Virabyanによる）は、いくつかの改善が加えられたフォークです：https ://github.com/ivirabyan/jquery-mentions
私は数年遅れており、「車輪の再作成」を回避したと思われるようですが、あなた（OP）または他の誰かが手を試してみたい場合に備えて、2セントを追加すると思いましたこの機能をゼロから実装します。
「メンション」管理ユーティリティには、次の 3 つのコンポーネントがあります。
Autocomplete モジュール: 文字列を指定して、メンションの作成に使用できるアイテムのセットを取得して表示するコンポーネント。
メンション追跡モジュール: メンション関連データの追跡を担当するコンポーネント。ユーティリティが添付されている入力要素のテキストのすべての変更を通じて、各言及の表面的および実質的な (存在する場合) 値と同様に、最低限の場所を追跡する必要があります。
言及視覚差別化モジュール: ユーティリティが添付されている入力要素内の残りのテキストから言及テキストを区別する役割を担うコンポーネント
このようなユーティリティの内訳を考えると、元の投稿の最初のステップと2 番目のステップは、それぞれメンション管理モジュールとオートコンプリートモジュールの実装で実行できるステップであることが明らかになるはずです。
平易な英語で 3 つのモジュールの実装をさらに掘り下げるのは面倒です。コードを見る方がはるかに良いです！幸いなことに、私はソリューションMentionatorを作成しました。これは堅牢で (ここで提案されている他のすべてのソリューションよりも優れています)、適切に構造化されており、従うのが簡単で、豊富なコメントがあります。したがって、すぐに使用できるソリューションが必要なのか、独自のソリューションを作成するための参考資料が必要なのかを検討する価値があります。
jquery.mentionsInput プラグインを強くお勧めします。Facebook と同じように @mention タグ付けをサポートし、アバターとローカル データまたは ajax データを使用できます。