Choices-js数字与空格筛选异常：如何配置实现精准搜索？

数据老陈

2026-7-11

解决Choices-js搜索匹配异常的配置方案

针对你遇到的搜索问题，只需在初始化Choices时添加自定义搜索函数及相关配置，即可实现精准的子字符串匹配，覆盖数字开头和空格结尾的搜索场景：

const element = document.querySelector('#telephone');
const choices = new Choices(element, {
  // 自定义搜索函数，精确匹配包含完整搜索词的选项
  searchFn: (searchValue, choices) => {
    return choices.filter(choice => {
      // 同时匹配选项的显示文本和值字段
      return choice.label.includes(searchValue) || choice.value.includes(searchValue);
    });
  },
  // 关闭默认排序，保持选项原有顺序
  shouldSort: false,
  // 确保搜索保留原始输入字符（如空格），不做预处理
  searchChoices: true
});

配置说明：

自定义searchFn：通过includes方法严格判断选项是否包含完整搜索词，避免默认模糊搜索的误匹配，确保"0906"只匹配含该串的选项，" 11"也能精准匹配带空格的结尾内容。
shouldSort: false：关闭搜索结果的自动排序，维持选项原有排列顺序。
searchChoices: true：保证搜索功能正常启用，且不对输入的特殊字符（如空格）做过滤处理。