Блог

У меня есть поле ввода (текст), для которого я хочу выполнить автозаполнение с несколькими именами. Это действует подобно полю Кому: в Gmail, когда пользователь вводит имя, нажимает enter и продолжает. Проблема в том, что у меня есть список имен, и это то, что добавляется в поле ввода, и как только вы отправляете, насколько я знаю, на сервер отправляется только строка поля. Проблема заключается в том, что когда есть два пользователя с одинаковым именем, может быть введено so: John Smith, Bob, John Smith , и эта строка будет отправлена на сервер.

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

Я использую jQuery 1.5.1 и этот плагин: Автозаполнение пользовательского интерфейса jQuery

Стандартный поиск предложит все, что вам нужно. Вам просто нужно использовать $.map() функцию, чтобы получить нужные вам данные из ответа сервера. Пример:

 ...
success: function (data) {
   response($.map(data.d, function (item) {
      return {
         id: item.ContactId,
         value: item.LastName   ", "   item.FirstName
      }
   }))
}
...
  

Затем просто сохраните выбранные элементы (включая идентификаторы и имена) в $().data() переменной на входе. Пример:

 ...
select: function (event, ui) {
   $(this).data("Selected", item);
}
...
  

Теперь, когда вы готовы отправить свое значение обратно на сервер, вы можете просто отправить идентификатор выбранной записи следующим образом:

 var idToSend = $("#autoComplete").data("Selected").id;
  

Я надеюсь, что это поможет. Удачи!

* * РЕДАКТИРОВАТЬ * *

Извините, $.map() это была раздвоенная мысль. data.d В моем примере это специфично для .NET, но есть два свойства, которые являются собственными для плагина автозаполнения ( .value и .label ).

.value будет отображаться и сохраняться то, что .label не существует; в противном случае .value будет обрабатываться как значение, сохраненное во входных данных после выбора, и .label будет то, что отображается в выпадающем списке.

Используйте событие select в автозаполнении пользовательского интерфейса Jquery, чтобы запустить javascript, который сохранит нужные вам идентификаторы в скрытом поле в той же форме. Смотрите документацию для события select здесь:

http://jqueryui.com/demos/autocomplete/#event-select