AngularJS UI-Bootstrap Typeahead没有匹配项

Question

I've been searching around so but found no question relating to this.

I am using Angular UI-bootstrap typeahead.

So I have

<input type="text" ng-model="loc" typeahead="location for location in filteredLocations = (locations | filter:$viewValue)" class="form-control" placeholder="Location" />

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

Thanks in advance

Answer 1

What you can do is create your own results listing. That's easy using typeahead-template-url="customTemplate.html" and this:

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
  </a>
</script>

If there are no results, return one element indicating there's no result. In the ng-template you can put a ng-if which checks if it's the no-results element and make it not clickable. That way the user can't choose "no results".

Answer 2

The UI Bootstrap website shows a directive typeahead-no-results="noResults" . Then it has <div ng-show="noResults"> with a glyphicon and the message "No Results Found". The full code is:

<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
  <i class="glyphicon glyphicon-remove"></i> No Results Found
</div>