У меня есть два текстовых ввода на моей странице: один для сокращенного кода и один для текстового описания этого кода. К обоим входам применено автозаполнение jQuery. Если пользователь выбирает код из выпадающего списка автозаполнения, он также должен автоматически применять текст, и наоборот.
$('#fc-workPerformedID').autocomplete({
serviceUrl: BASE_URL + 'Qsys/FaultTypes',
paramName: 'code',
width: 'flex',
autoSelectFirst: true,
minChars: 1,
transformResult: response => ({ suggestions: JSON.parse(response).map(d => ({ value: d.code, data: d })) }),
formatResult: formatWT,
onSelect: function (s) {
$('#fc-workPerformedText').val(s.data.desc).change(); // I've added change() here
}
});
$('#fc-workPerformedText').autocomplete({
serviceUrl: BASE_URL + 'Qsys/FaultTypes',
paramName: 'match',
width: 'flex',
autoSelectFirst: true,
minChars: 2,
transformResult: response => ({ suggestions: JSON.parse(response).map(d => ({ value: d.desc, data: d })) }),
formatResult: formatWT,
onSelect: function (s) {
$('#fc-workPerformedID').val(s.data.code).change(); // I've added change() here
}
});
Логично, что сначала это не обновляло модель представления другого ввода , Для этого я нашел этот подход, в котором предлагалось добавить команду change()
после обновления значения ввода. Я уже сделал это в своем коде.
Проблема с этим подходом состоит в том, что, как только я вызываю команду change()
этого другого поля ввода, он также открывает свое меню автозаполнения. Так, например, если я выбираю что-то на входе fc-workPerformedID
, меню автозаполнения fc-workPerformedText
открывается сразу после нажатия. Если я снова удаляю вызов change()
, он снова работает как задумано.
Есть ли способ предотвратить это? Пользовательский опыт должен быть простым: введите код или текст, а другое значение будет автоматически заполнено и обновлено в модели представления.