javascript - 为什么多选键输入时不更新？(Why is multi select not updating on input keyup?)

Question

Hi I am trying to update multiselect based on search string but on keyup the values are not updated in UI.

(嗨，我正在尝试基于搜索字符串更新multiselect，但是在keyup上，UI中的值未更新。)

The multiselect is on a modal dialog which is opened by clicking a button.

(多重选择位于模式对话框中，可通过单击按钮打开。)

On load the search box and multiselect are available.

(加载时，搜索框和多重选择均可用。)

The user will enter text and onkeyup event I want to filter the multiselect and display the matching the items only.

(用户将输入文本和onkeyup事件，我想过滤多选并仅显示匹配的项目。)

My code MultiSelect.cshtml

(我的代码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>`);
           }
       }    
    }

The code in both openForSibling and filterMultiSelectUnselected is doing the same but the later is not updating the values in UI.

(openForSibling和filterMultiSelectUnselected的代码都执行相同的操作，但后者不会更新UI中的值。)

When I debug in developer tools $unsel has the correct the values based on the search string but cannot see why it is not updated in the UI.

(当我在开发人员工具中调试时， $unsel具有基于搜索字符串的正确值，但无法查看为什么未在UI中对其进行更新。)

Please help me fix this as I do not see what is going wrong here.

(请帮助我解决此问题，因为我看不到这里出了什么问题。)

The code is repetitive but ignore that, it is legacy code to be replaced/rewritten soon.

(该代码是重复的，但请忽略，它是即将被替换/重写的旧代码。)

Should the multiselect be refreshed?

(是否应该刷新多选？)

Thanks

(谢谢)

  ask by hima translate from so

Answer 1

等待大神答复