Angular-bootstratp ui typeahead for no matching results

angularjs angular-ui-bootstrap bootstrap-typeahead
prdtuty picture prdtuty · Sep 4, 2015 · Viewed 9.5k times · Source

Hi I am using bootstrap ui typeahead in my angularjs site. This works great. Just wondering whether it is possible to show some text like "No matches found" when the user type something that is not in the list.

Answer

MLBCodes picture MLBCodes · Sep 5, 2015

The typeahead directive includes an attribute for this, typeahead-no-results.

Here is an example: 

<input type="text" ng-model="asyncSelected" placeholder="Placeholder Text" typeahead="address for address in getLocation($viewValue)" typeahead-no-results="noResults" class="form-control">

Then use ng-if or ng-show to display your error message. 

<div ng-if="noResults">
  No Results Found!
</div>

For more reading material be sure to check out the bootstrap-ui docs

Related questions

Angularjs typeahead example is always not working

I am trying to use a case on angularjs typeahead now, but it is always not working, am I forget to import some js files? please help me out, thank you Html: <!doctype html> <html ng-app="search"&…

Read More
Typeahead using object name

I'm trying to setup a typeahead using AngularJS & UI Bootstrap like so: .html <input type="text" ng-model="selectedStuff" typeahead="stuff.name for stuff in stuffs | filter:$viewValue"/> <span>{{selectedStuff.name}}</span> <span&…

Read More
Invoking modal window in AngularJS Bootstrap UI using JavaScript

Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button? I am new to AngularJS and tried searching the documentation here and here without luck. Thanks

Read More