Angularjs:当输入的字符串找不到匹配项时，在预先输入中不显示搜索结果 [英] Angularjs : Showing no search result in typeahead when no match is found for entered string

问题描述

我正在使用 Angular UI-bootstrap typeahead.

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;
});

您可能想要修改您的预输入代码，如下所示

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屋！