JavaScript设置输入框值后如何触发表单更新及查询匹配结果

触发搜索匹配更新的方案 #

直接修改value属性不会触发组件绑定的内容变化监听事件，该页面的学校输入框使用的是Kendo UI AutoComplete组件，有两种可行方案：

方案1：通用原生事件触发（无需依赖组件API） #

赋值后主动派发组件监听的输入事件即可触发匹配：

const schoolInput = document.getElementsByClassName("k-textbox")[1];
// 赋值
schoolInput.value = "Horace";
// 触发input事件通知内容更新
schoolInput.dispatchEvent(new Event('input', { bubbles: true }));
// 若上述操作未触发匹配，追加触发change事件
schoolInput.dispatchEvent(new Event('change', { bubbles: true }));

方案2：调用Kendo组件原生API（更稳定） #

直接操作组件实例调用搜索方法，兼容性更好：

const schoolInput = document.getElementsByClassName("k-textbox")[1];
// 获取Kendo AutoComplete组件实例
const autoComplete = $(schoolInput).data("kendoAutoComplete");
// 直接触发搜索
autoComplete.search("Horace");

查询匹配结果确认唯一性 #

触发搜索后，直接读取组件数据源的当前匹配结果即可判断是否为唯一匹配：

// 接上面获取到的autoComplete实例
const matchResults = autoComplete.dataSource.view();
// 打印所有匹配到的学校信息
console.log(matchResults);
// 判断是否唯一匹配
const isUnique = matchResults.length === 1;
if (isUnique) {
  // 唯一匹配时可直接选中目标项
  autoComplete.select(0);
}

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