Web アプリで人々が互いに話すことができるチャット ウィジェットを構築しています。したがって、チャットのほとんどは単なるテキストですが、人々が言うことを許可したいと思います
チャットに表示される必要があります（例）
@記号を入力するJoeと、ユーザーのリストからオートコンプリートされ、単なるテキストではない何らかの HTML 要素としてレンダリングされます。
良い例は、StackOverflow で質問をしたり編集したりするときのタグ ボックスです。1 つまたは複数のタグにオートコンプリートする自由なテキストを入力できます。私は基本的に、タグが特定のシンボル (@この場合) でアクティブになり、それ以外の場合は自由なテキストを許可したいと考えています。@fooUser this is my response to your commentもう 1 つの例は、入力しfooUserてリンクになるStackOverflow のコメント返信フィールドです。
GitHub もこれを行います。#(問題) と@(ユーザー)に対して異なるオートコンプリートを提供します。
Twitter/Bootstrap typeaheadやjQuery UI autocompleteなどのライブラリは認識していますが、入力全体をオートコンプリートしているようで、このようなことを行うには十分な柔軟性がありません。ここには 2 つの主な問題があります。
- 入力フィールド上でテキストと任意の DOM 要素の両方のハイブリッド レンダリングにアプローチする良い方法は何ですか?
- 入力全体だけでなく、インライン オートコンプリートをサポートするオートコンプリート ライブラリはありますか?
テキスト入力/テキスト領域に DOM 要素をレンダリングしなくても問題ありませんが、このタイプのハイブリッド フリーテキスト/オートコンプリートを行うライブラリがまったく見つかりません。
余談ですが、これは Meteor で行っているため、オートコンプリートのデータ ソースはMeteor コレクションになります。それはデータがどのように接続されるかにあまり影響を与えるべきではありませんが、流星を意識した答えはさらに役に立ちます.
テキストエリアでのTwitterスタイルのオートコンプリートに関連していますが、その質問は2年以上前のもので、良い答えはありません.
