Question

我正在使用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;
});

当我输入时，它会显示typeahead-popup中的匹配选项。但是，如果没有匹配，我应该怎么做才能在同一个弹出窗口中显示“找不到匹配项”？

Answer 1

您可以测试response.data的大小。如果为0，则将元素推送到数组：

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

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

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

Angularjs：如果找不到输入字符串的匹配项，则在typeahead中不显示搜索结果

1 个答案: