CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapangular-ui-typeahead
Markus Coetzee
Markus Coetzee

Reputation: 3444

Angular UI Typeahead - Manually clear/hide dropdown

My use case is rather simple. I'm using the typeahead directive as a search box and want to manually clear/hide its dropdown when hitting enter (and you haven't selected anything) - much like Google does it.

P.S. the text in my search box needs to remain intact when clearing the dropdown

Upvotes: 1

Views: 3346

Answers (2)

Prathibha
Prathibha

Reputation: 31

Simply execute the beow code will close the UI Typeahead list/ dropdown unless it doesn't harm your application:

$('body').click();

Upvotes: 0

Kees de Kooter
Kees de Kooter

Reputation: 7195

You have to wrap the typeahead element in a form. If you do that the typeahead will submit the form. If you add an ng-submit directive you can put your desired behaviour in there.

<form ng-submit="search(query)">
  <input type="text" ng-model="query"
     typeahead="foo as foo for foo in bars"
     typeahead-on-select="onSelect($item)"
     typeahead-focus-first="false"
     />
</form>

Tested with version 0.12.0 of angular-bootstrap. See the comments in a related issue: https://github.com/angular-ui/bootstrap/pull/2916:

the expected behavior is that the outer form is submitted when hitting enter from the input and nothing is focused

Upvotes: 3

Related Questions