Angular-bootstratp ui 没有匹配结果时提前输入

Question

您好，我在 angularjs 站点中使用 bootstrap ui 预输入。这很好用。只是想知道当用户键入不在列表中的内容时是否可以显示一些文本，如 "No matches found"。

Answer 1

typeahead 指令为此包含一个属性，typeahead-no-results。

这是一个例子：

<input type="text" ng-model="asyncSelected" placeholder="Placeholder Text" typeahead="address for address in getLocation($viewValue)" typeahead-no-results="noResults" class="form-control">

然后使用 ng-if 或 ng-show 显示您的错误消息。

<div ng-if="noResults">
  No Results Found!
</div>

如需更多阅读 material 请务必查看 bootstrap-ui docs

Answer 2

typeahead-no-results 选项不支持多个 typeaheads，在我看来它非常笨拙。您可能想要显示 "No matches found" 而不是结果而不是其他地方。

我被迫在选择时调用的方法中对 UibTypeaheadController 进行了这个非常小的解决方法：

scope.select = function(activeIdx, evt) {

    if (scope.matches.length === 1 
        && scope.matches[activeIdx].model != null 
        && scope.matches[activeIdx].model.noMatchesFound) {
        return;
    }

此外，当搜索回调中没有匹配项时，我不得不推送一个虚拟对象：

    if (matches.length === 0) {
        matches.push({ 
                      displayProperty: "No matches found", 
                      noMatchesFound: true 
                     });
    }

Angular-bootstratp ui 没有匹配结果时提前输入

Angular-bootstratp ui typeahead for no matching results

angularjs

bootstrap-typeahead

angular-ui-bootstrap