使用`el.value`给过滤输入框赋值时未触发筛选的问题求解

问题根源 #

通过JS脚本直接修改输入框的value属性时，浏览器不会自动触发你绑定的keyup、change事件，这类交互事件仅在用户手动操作输入框（比如键盘输入、失焦修改内容）时才会默认触发，因此你给输入框赋值后筛选逻辑没有执行。

修复方案 #

只需要修改setInputSeries函数，在赋值完成后手动触发绑定的筛选事件即可，以下是两种可行的修改方式：

方式1：使用jQuery内置方法触发（推荐，你已引入jQuery依赖） #

function setInputSeries(elmnt) {
    document.getElementById("search").value = elmnt.dataset.series;
    // 手动触发change事件，执行筛选逻辑
    $('#search').trigger('change');
}

方式2：使用原生JS触发事件 #

function setInputSeries(elmnt) {
    const searchInput = document.getElementById("search");
    searchInput.value = elmnt.dataset.series;
    // 原生创建并触发change事件
    searchInput.dispatchEvent(new Event('change'));
}

修改后点击按钮就会正常触发列表筛选了。

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