テキストエリアでオートコンプリート jquery UI を使用するシナリオがあります。ユーザーが提案から値を選択するたびに、テキストエリアに選択内容とそれに続くセミコロンが入力されます。
提案から選択した値の ID を追跡する必要があります。私の考えは、それらをスパンタグのデータ属性に入れ、選択した値をその中にラップしてテキストエリアに入力することでした.しかし、現在、テキストエリアはこれらのHTMLタグを表示しています.
何をすべきかについての提案はありますか?
テキストエリアでオートコンプリート jquery UI を使用するシナリオがあります。ユーザーが提案から値を選択するたびに、テキストエリアに選択内容とそれに続くセミコロンが入力されます。
提案から選択した値の ID を追跡する必要があります。私の考えは、それらをスパンタグのデータ属性に入れ、選択した値をその中にラップしてテキストエリアに入力することでした.しかし、現在、テキストエリアはこれらのHTMLタグを表示しています.
何をすべきかについての提案はありますか?
これを簡単に実現し、ID を正確に保つ(ユーザーがタイプを解放できるように開いたままにしておく必要がある場合)ための最善の方法は、必要なときに ID をフェッチすることです。つまり、ユーザーがオートコンプリートして選択するか、手動で入力できるようにしますが、そのデータで何かを行う時点で、リスト内の各項目の ID をフェッチします。
<textarea>Item 1; Item 2; Manual Item 3;</textarea>
次に、送信の時点で(またはサーバー側でも)、リストを分割し、名前に基づいて各 ID を検索します。Item 1
これにより、ユーザーがリストを手動で変更したり、リストを並べ替えたりすることから自動的に保護されます。
<textarea>Item 42; Item 2; Manual Item 3;</textarea>
上記の例では、リスト内の各項目は、必要になる直前にその ID について再問い合わせされるため、 のItem 42
代わりに が使用されますItem 1
。他の形式の ID 追跡を使用している場合は、とにかくこの不測の事態をチェックする必要があり、余分なコードと作業が大量に発生することになります。
送信時に ID をチェックするときに行う必要がある唯一の余分な作業は、まだ存在しないアイテムに対して何か特別なことをしたい場合です。しかし、ID を具体的に追跡するシステムを使用して、とにかくこれを行う必要があった可能性が最も高いでしょう。
最適化が心配な場合は、名前を検索キーとして、値を ID (ユーザーがオートコンプリートしたときに返される) として使用して、常にハッシュ/オブジェクトを保持できます。そして、このハッシュを使用して、ユーザーが終了したときに ID のリストを入力します。
/// create your lookup object
lookup = {};
/// store in the lookup
lookup[name] = id;
/// then after a few selections you'll end up with an object like so:
{
'Item 1': 1,
'Item 2': 2,
'Item 42': 42
};
明らかに、名前の大文字と小文字の可能性を考慮に入れたいと思うでしょうが、それは.toLowerCase()