Автозаполнение jQuery с несколькими значениями и значками (электронная почта в поле)

Question

Я хочу создать поле получателя в форме, используя поле автозаполнения jQuery для поиска. Я хочу, чтобы это позволило несколько значений. Я уже понял, как это сделать.

Подвох в том, что при добавлении получателя и использовании автозаполнения для выполнения поиска имя получателя должно иметь синий фон со значком удаления (x) рядом с ним, аналогично «Кому». поле на iPhone или поиск человека в Facebook (например, при создании новой группы в FB)

Любые идеи приветствуются!

Спасибо за ваше время, Albert

Answer 1

Прежде всего вам необходимо понять, что то, что вы хотите сделать, не является функцией, доступной по умолчанию только с одним элементом HTML (в данном случае входом).

Я не буду входить во многие техническиедетали, так как это означало бы кормление с ложечки, я предпочитаю указывать вам правильное направление;Надеюсь, вы не возражаете, вот и все:

Во-первых, вам нужен контейнер, который будет выглядеть как блок, скажем, div.Внутри него у вас будет поле ввода, которое должно занимать только часть контейнера, например:

<div id="tag_editor">
  <span id="tokens"><!-- js stores tags here --></span>
  <input type="text" id="tag_editor_input">
</div>

Как только вы напишите некоторый текст на этом входе,автозаполнение должно появиться нормально.Однако вам понадобится ловушка, чтобы, когда вы не сфокусированы или щелкаете по подсказкам, содержимое входных данных преобразуется в элемент HTML, отображающий данные, вы должны храниться в контейнере токенов.

OfКонечно, поле ввода будет таким же, но оно сместится вправо, например:

Как только вы это сделаете, вы сможете добавить как можно большетеги по мере необходимости.Затем, когда вам нужно получить данные, просто переберите содержимое #tokens и используйте их как часть данных.

Надеюсь, это поможет.