Angularjs : Showing no search result in typeahead

Question

I am using Angular UI-bootstrap typeahead.

I have 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"  />

and

Script:

.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"?

Answer 1

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"