如何用JavaScript和jQuery实现搜索框并解决下拉选项重复问题

• 每次触发键盘事件时没有预先清空下拉框原有内容，每次遍历匹配到结果就直接追加，导致旧的匹配项和新的匹配项叠加出现重复
• remove() 方法使用错误，jQuery的remove()方法需要传入合法的选择器，直接传入数组项字符串无法匹配到对应的<option>元素完成删除
• 输入为空的判断放在了循环内部，会被重复执行多次，逻辑冗余效率低

HTML部分：

<input class="type" value="" />
<select class="opties"></select>

JS部分：

$('.type').on('keyup', function() {
    let input = $('.type').val().toLowerCase();
    let pc = ['Processor', 'Ram', 'Videokaart', 'Voeding', 'SSD', 'Fans'];
    // 先清空原有下拉选项，避免重复
    $('.opties').empty();
    // 输入为空直接结束逻辑，无需后续遍历
    if(input === '') return;
    // 先拼接所有匹配项再一次性插入，减少DOM操作次数
    let optionsHtml = '';
    for(let i=0; i<pc.length;i++) {
        if(pc[i].toLowerCase().includes(input)) { 
            optionsHtml += "<option>"+pc[i]+"</option>";
        }
    }
    $('.opties').append(optionsHtml);
})

内容的提问来源于stack exchange，提问作者Keygun2k1