Angular UT bootstrap - showa dropdown menu on typeahead-no-results

Question

try to get a dropdown menu when there is no result in typeahead but the view is not displayed in the dropdown menu

<div class="dropdown"> <div class="form-group"> <input placeholder="Vælg kunde" type="text" ng-model="customer" typeahead-editable="false" uib-typeahead="customer as customer.customer for customer in customers | filter:$viewValue | limitTo:8" class="form-control" typeahead-popup-template-url="customPopupTemplate.html" typeahead-min-length="0" typeahead-no-results="noResults"> </div> <div ng-if="noResults" dropdown-toggle> <ul class="dropdown-menu" > <li><a href="#">No result</a></li> </ul> </div> </div> 

deleting class = "dropdown-menu" gives me no result, but I do not understand it as a drop-down menu

who is making this dropdown without any results?

Answer 1

The problem is that the dropdown menu never starts and thus does not display correctly. You just make the markup visible.

You can set auto-close="disabled" and is-open="true" to show the drop-down menu on noResults :

 <div class="form-group"> <input placeholder="Vælg kunde" type="text" ng-model="customer" typeahead-editable="false" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" typeahead-min-length="0" typeahead-no-results="noResults"> <span ng-if="noResults" auto-close="disabled" is-open="true" uib-dropdown uib-dropdown-toggle> <ul class="uib-dropdown-menu" > <li><a href>no results</a></li> </ul> </span> </div> 

working demo → http://plnkr.co/edit/4vVznXyjZo3HuIb2p5as?p=preview

NB : plnkr uses version ui-bootstrap 0.14.3, if you use version prior to 0.14.0, then do not add uib- prefixes.