Мне нужно вернуть числовой идентификатор для выбора, но отобразить имя клиента в словах.У меня есть скрытое поле для идентификатора клиента и текстовый ввод для отображаемого имени.Это вроде работает, но я бы предпочел улучшить взаимодействие с пользователем.
Запрос ajax возвращает список клиентов в переменных данных, которые используются для построения массива объектов, в соответствии с документами:
values = [];
$.each(data, function(index, guest) {
values.push({label: guest, value: index});
});
Затем я связываю автозаполнение с полем формы:
$( "#customer" + numRand ).autocomplete({
source: values,
minLength: 2,
select: function (event, ui) { // set hidden field with index of selection
$( "#customerId" + numRand ).val(ui.item['value']);
},
change: function (event, ui) { // restore word label to input field
$( "#customer" + numRand ).val(ui.item['label']);
}
});
NumRand предназначен для создания полууниверсальных идентификаторов, потому что в этом приложении форма загружается в диалоговом окне пользовательского интерфейса JQuery и сохраняетсяв противном случае значений между экземплярами.
Я пытался использовать событие change вместо close , но результат тот же. * Когдакак минимум две буквы были введены в поле формы, меню отображается правильно, с отображением имен.Когда имя выбрано, числовой индекс попадает в поле формы.Когда фокус перемещается на любую другую часть страницы (щелчок по фону работает), числовой индекс заменяется именем клиента по желанию.Я хочу, чтобы имя также отображалось изначально.
Есть предложения, как получить имя, отображаемое при выборе?(Я попытался поместить его в этот обработчик, но он сразу же перезаписывается идентификатором, который остается там, когда фокус перемещается).
Заранее благодарен за любые предложения.
* РЕДАКТИРОВАТЬ - я был неправ,событие close , как и событие select , переопределяется встроенным методом.
UPDATE: решение простое: используйте select событие и переопределить встроенный метод, возвращая false:
$( "#customer" + numRand ).autocomplete({
source: values,
minLength: 2,
select: function (event, ui) {
$( "#customerId" + numRand ).val(ui.item['value']);
$( "#customer" + numRand ).val(ui.item['label']);
return false;
}
});