一、问题现象
页面使用原生 下拉选择器，后端返回下拉选项包含两组关键字段：
id：数字编号，作为 的 value
cattitle：中文名称，页面展示给用户看的文字
需求：实现下拉选项模糊搜索，用户输入中文名称进行筛选。
出现 BUG：输入中文名称搜索不到任何结果，但选择项本身正常渲染。
HTML 结构参考：
html
预览
动态渲染 option 逻辑（伪代码）： js 运行 // 循环渲染下拉选项 data.forEach(item => { ('#input-company').append(\`{item.cattitle}`) }) 二、错误代码与根因分析 错误筛选逻辑 js 运行 // 事务所分类匹配 let matchCompany = true; if (companyName) { // ❌ 致命问题：用搜索文本 和 item.id（数字）做全等对比 matchCompany = item.id === companyName; } console.log(matchCompany); 核心原因拆解： 用户在搜索框输入的内容是中文名称字符串（cattitle）； option 的 value 存放的是数字 ID，筛选时拿到的搜索关键词 companyName 是文本； 代码拿【中文文本】和【数字 id】直接 === 全等对比，类型、内容全都不匹配，条件永远 false，搜索不出数据； 通俗来讲： 你搜的是名字 "XX 事务所"，代码却拿着名字去和数字 ID 对比，驴唇不对马嘴，自然匹配不到任何选项。 补充延伸： 如果是下拉选中后取值，("#input-company").val() 获取到的是 option 的 value，也就是数字 ID； 很多同学容易混淆：展示文本！= value 存储值，筛选时一定要分清你要对比的字段。 三、两种修复方案 根据业务场景二选一 方案 1：用户输入名称搜索 → 匹配 cattitle（当前需求适用） 用户输入中文名字检索，那就拿搜索关键词和展示文本做模糊匹配 js 运行 let matchCompany = true; if (companyName) { // ✅ 使用展示名称模糊匹配，支持中文搜索 matchCompany = item.cattitle.includes(companyName); } 使用 includes() 实现模糊搜索；如果需要兼容老旧浏览器，可以改用 indexOf() \> -1 方案 2：用户传入 ID 筛选 → 匹配 id（编辑回填、ID 精确查询场景） 如果场景是通过编号精准筛选，再使用 id 对比，注意做好类型转换，避免数字字符串类型不相等问题 js 运行 let matchCompany = true; if (companyName) { // 两边统一转为数字再对比，防止字符串数字和数字全等失效 matchCompany = Number(item.id) === Number(companyName); } 四、拓展知识点（日常极易踩坑） 原生 select 两大属性区分 html 预览 张三 // ('#select').val() → "100" 【value值，优先用来传给后端】 // $('#select option:selected').text() → "张三" 【页面展示文本，仅用于前端展示、文本搜索】 全等 === 的隐性陷阱 数字 100 和字符串 "100" 使用 === 判断结果为 false；如果必须跨类型对比，统一转成相同类型再判断。 搜索场景最佳实践 用户手动输入文字搜索 → 永远匹配展示文本（text/cattitle） 接口回显、ID 精确筛选 → 匹配value（id） 五、完整优化示例（jQuery 下拉筛选完整片段） js 运行 // 下拉数据源 let companyList = \[\]; // 筛选关键词 let searchText = '';
// 筛选过滤
const filterList = companyList.filter(item => {
let match = true;
if(searchText) {
// 用户输入中文名称，匹配名称模糊搜索
match = item.cattitle.includes(searchText)
}
return match;
})
// 重新渲染下拉框
renderSelect(filterList)
六、总结避坑清单
✅ 先分清：搜索关键词是【用户输入的文本】还是【后端传入的编号 ID】
✅ 文本搜索 → 和展示名称字段对比；ID 精准筛选 → 和 value/id 字段对比
✅ 不要习惯性直接拿 id 去做模糊搜索，字段不对应直接造成搜索功能失效
✅ 使用全等判断时，留意数据类型（字符串 / 数字）不一致引发匹配失败