Angularjs：显示在预输入任何搜索结果时，没有找到匹配的输入的字符串 [英] Angularjs : Showing no search result in typeahead when no match is found for entered string

问题描述

我采用了棱角分明的UI引导预输入。

I am using Angular UI-bootstrap typeahead.

我有HTML

<input type="text" 
       ng-init="selectedCrossFormFieldText = selectedCrossFormFieldText || {}" 
       ng-model="selectedCrossFormFieldText[fieldId]" 
       placeholder="Auto-complete data from field of form" 
       empty-typeahead 
       ng-trim="false" 
       typeahead="crossFormField.id as crossFormField for crossFormField in getCrossFormFieldData(fieldId, $viewValue) | filter:$viewValue:optionComparator" 
       typeahead-template-url="views/blocks/cross_form_data_typeahead.html" 
       typeahead-on-select="addCrossFormField(fieldId, $item, $model, $label)" 
       typeahead-loading="loadingCrossFormField[fieldId]"  
       typeahead-min-length="0" class="form-control"  />

和

脚本：

.then(function (response) {
    console.log('DataForTypeahead', response);
    return response.data;
});

当我键入它显示了预输入，弹出的匹配选项。但是，我应该怎么办展现，当没有比赛，在那同样弹出没有找到匹配？

When I type it shows the matching options in the typeahead-popup. But what should I do to show, when there are no matches, on that same popup "No matches found"?

推荐答案

您可以测试response.data的大小。如果它是0，推的元件的阵列

You can test the size of of response.data. If it is 0, push an element to the array:

.then(function (response) {
    console.log('DataForTypeahead', response);
    if (response.data.length === 0) {
        response.data.push({
            label: 'No matches found'
        })
    }
    return response.data;
});

您可能需要修改您的预输入code如下：

Your might want to modify your typeahead code as follows

typeahead="crossFormField.id as crossFormField.label for crossFormField in getCrossFormFieldData(fieldId, $viewValue) | filter:$viewValue:optionComparator"

这篇关于Angularjs：显示在预输入任何搜索结果时，没有找到匹配的输入的字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！