Привет. Я пытаюсь обновить множественный выбор на основе строки поиска, но при использовании ключа значения не обновляются в пользовательском интерфейсе. Мультиселект находится в модальном диалоговом окне, которое открывается нажатием кнопки. При загрузке доступны окно поиска и множественный выбор. Пользователь введет текст и событие onkeyup. Я хочу отфильтровать множественный выбор и отобразить только соответствующие элементы.
Мой код MultiSelect.cshtml
<input type="text" placeholder="Search..." class="c-multi-select-search" onkeyup="MultiSelect.filterMultiSelectUnselected(this)" />
<select size="12" class="c-multi-select__unselected" multiple="multiple"></select>
MultiSelect.ts
function openForSibling(thisButton) {
$unsel = $dialogContent.find(".c-multi-select__unselected");
$unsel.find('option').remove();
for (var i = 0; i < optsArr.length; i += 2) {
if (selectedIds.indexOf(parseInt(optsArr[i + 1])) < 0) {
$unsel.append(`<option value="${optsArr[i + 1]}">${optsArr[i]}</option>`);
}
}
}
export function filterMultiSelectUnselected(search) {
$unsel = $dialogContent.find(".c-multi-select__unselected");
$unsel.find('option').remove();
for (var i = 0; i < optsArr.length; i += 2) {
if (selectedIds.indexOf(parseInt(optsArr[i + 1])) < 0 &&
optsArr[i].toLowerCase().indexOf(search.value.toLowerCase()) >= 0) {
$unsel.append(`<option value="${optsArr[i + 1]}">${optsArr[i]}</option>`);
}
}
}
Код в openForSibling
и filterMultiSelectUnselected
делает то же самое, но последний не обновляет значения в пользовательском интерфейсе. Когда я отлаживаю в инструментах разработчика, $unsel
имеет правильные значения, основанные на строке поиска, но не может понять, почему она не обновляется в пользовательском интерфейсе.
Пожалуйста, помогите мне исправить это, поскольку я не вижу, что происходитздесь не так. Код повторяется, но не обращайте на него внимания, это устаревший код, который скоро будет заменен / переписан.
Следует ли обновить мультиселект? Спасибо