Question

我遇到了AngularStrap Typeahead的可用性问题，并想知道是否有其他人遇到过此问题或可能有解决方法。任何反馈都值得赞赏。

这个问题很容易通过这个问题得到证明，我只是从AngularStrap文档中创建并删除了所有不必要的内容，只关注手头的问题。

http://plnkr.co/edit/MlTb0wN5vRJ9NeaigrGX?p=preview

在图标搜索框中，键入：class =“fa fa -

请注意，所有四个图标都显示出来。现在在末尾添加一个“g”，并观察它对齿轮图标的限制。这是为什么？因为$ scope.icons中的标签值当然都与图标共享相同的前缀。现在假设你有一个更复杂的模板，或者在元素之间有更多共同点的东西，比如：

Item1: <img src="http://myawesomehost/atmygreatlocation/somewhere/abc.jpg> ABC

Item2: <img src="http://myawesomehost/atmygreatlocation/somewhere/lmnop.jpg> LMNOP

Item3: <img src="http://myawesomehost/atmygreatlocation/somewhere/xyz.jpg> XYZ

由于此处有很多常见字符且TypeAhead 匹配整个值，包括网址，因此您输入的几乎 ANYTHING 将导致匹配。

如果没有解决方法，我很难相信任何人都可以使用它，因为最终用户总是会抱怨搜索结果与他们输入的内容不符。

有什么想法吗？

干杯！ Stabby

Answer 1

默认情况下，bs-typeahead指令会将此过滤器附加到ng-options：

| filter:$viewValue

这意味着如果项目中的任何属性包含$viewValue（您键入的文本），该项目将会显示。

如果您想过滤特定字段，例如只有value而非label，您可以直接在ng-options中添加过滤器：

ng-options="icon as icon.label for icon in icons | filter: { value: $viewValue }"

或者替代方案是通过您的自定义过滤器：

<input ... data-filter="myFilter" bs-typeahead />

并将过滤逻辑放在自定义过滤器中：

.filter('myFilter', function (filterFilter) {
  return function (items, searchValue) {
    return filterFilter(items, { value: searchValue });
  };
});

示例Plunker： http://plnkr.co/edit/iX8S8VSTHNAzQftSIFvf?p=preview

AngularStrap typeahead错误地搜索整个标签值

1 个答案: