Angular JS+Bootstrap UI Typeahead数组单双词匹配问题求助

嘿，这个场景我太熟悉了！Bootstrap UI的typeahead默认用的是包含匹配——只要输入的字符出现在选项的任意位置，就会被筛选出来，这就是为啥你输入"Bedford"会带出"New Bedford"这类结果。要改成只匹配开头或者更精准的规则，咱们可以通过自定义匹配函数来搞定：

方案1：前缀匹配（仅匹配名称开头） #

这种方式会让输入的内容必须是城镇名称的起始部分，正好解决你的需求——输入"Bedford"只会显示以它开头的选项，不会带出包含该词汇的其他城镇。

首先在控制器里定义匹配函数：

$scope.townPrefixMatcher = function() {
  return function matchQuery(query, townName) {
    // 统一转小写，实现大小写不敏感匹配
    const lowerQuery = query.toLowerCase();
    const lowerTown = townName.toLowerCase();
    // 检查查询字符串是否是城镇名称的开头
    return lowerTown.indexOf(lowerQuery) === 0;
  };
};

然后在HTML的typeahead组件中引用这个匹配函数：

<input type="text"
       ng-model="selectedTown"
       uib-typeahead="town for town in townlist | filter:$viewValue"
       typeahead-match="townPrefixMatcher()"
       placeholder="搜索城镇">

方案2：整词匹配（匹配独立词汇） #

如果之后你需要更严格的匹配——比如输入"Bedford"只匹配单独的Bedford，完全不匹配包含这个词的其他城镇（比如New Bedford），可以用正则表达式实现整词匹配：

控制器里的匹配函数改成这样：

$scope.townWordMatcher = function() {
  return function matchQuery(query, townName) {
    // \b 是正则的单词边界，i 表示忽略大小写
    const matchRegex = new RegExp(`\\b${query}\\b`, 'i');
    return matchRegex.test(townName);
  };
};

HTML里同样把typeahead-match指向这个函数就行。

小提示 #

如果你的townlist数组里存的不是字符串，而是对象（比如{id: 1, name: "Bedford"}），记得把匹配函数里的townName改成对应的属性，比如town.name。

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