JQuery автозаполнение, добавление дополнительных данных с автозаполнением данных - PullRequest
Новая
       11

JQuery автозаполнение, добавление дополнительных данных с автозаполнением данных

1 голос
/ 12 апреля 2011

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

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

Я использую jQuery 1.5.1 и этот плагин: jQuery UI Autocomplete

Ответы [ 2 ]

4 голосов
/ 12 апреля 2011

Стандартный поиск предложит все, что вам нужно.Вам просто нужно использовать функцию $.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 будет тем, что отображается в раскрывающемся списке.

0 голосов
/ 12 апреля 2011

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

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

...