Question

您好我在我的angularjs网站上使用bootstrap ui typeahead。这非常有效。只是想知道当用户输入不在列表中的内容时是否可以显示“找不到匹配项”等文本。

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>

有关更多阅读材料，请务必查看bootstrap-ui docs

Answer 2

没有提前输入的结果选项不支持多次提前输入，我认为这很笨拙。您可能要显示“没有找到匹配项”而不是结果，而不是其他地方。

我被迫在选择时调用的方法内部对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 typeahead没有匹配的结果

2 个答案: