0

I just built a small search app for movies using AngularJS and Elasticsearch. I used the AngularJS UI Bootstrap Typeahead for autocomplete and in testing noticed something about user interaction.

Say I want to search for actors named Tom. I type in "tom" in the search input and 5 suggestions appear - fine. However, it won't let me just search for "tom" if all I do is press Enter on the keyboard. It automatically selects the first suggestion in the dropdown. IT WILL just search for "tom" if I just click on the submit button. My form markup is below - where am I going wrong?

I want to allow my users to be able to search for the queries they enter (when they press Enter) without being limited to just the suggestions provided...

<div class="col-sm-3 col-md-6 pull-left" style="border: 1px solid red;"><form name="q" ng-submit="vm.search()" class="navbar-form" role="search">
<div class="input-group input-group-md">
  <input type="text" ng-model="vm.searchTerms" class="form-control input-md" placeholder="{{ vm.searchTerms }}" name="q" typeahead-show-hint="true" uib-typeahead="query for query in vm.getSuggestions($viewValue)" typeahead-on-select="vm.search($item)">

  <span class="input-group-btn">
    <button class="btn btn-primary btn-md" type="submit" id="results-search-btn" ng-submit="vm.search()"><i class="fa fa-search fa-lg"></i>
    </button>
  </span>
</div>

user3125823
  • 1,846
  • 2
  • 18
  • 46

1 Answers1

0

It is automatically selecting the first result. So when you press enter it already has focus on that first result. You can configure the angular ui typeahead to not automatically select the first result like so:

typeahead-focus-first="false"

see their documentation for further information:

https://angular-ui.github.io/bootstrap/#/typeahead

Eric G
  • 2,577
  • 1
  • 14
  • 21
  • thanks for the quick answer. It works HOWEVER, it also takes away the highlight from the first suggestion - which I'd like to keep. Is there a way to keep the highlight as well? – user3125823 Oct 12 '16 at 22:38
  • 1
    The highlight is directing the enter key functionality, the only thing I could think of would be to override the enter key functionality to do what you'd like instead. Something like this but instead of just returning false trigger you search function as well: http://stackoverflow.com/questions/11235622/jquery-disable-form-submit-on-enter – Eric G Oct 12 '16 at 22:49
  • @user3125823 sorry, forgot to tag you. – Eric G Oct 12 '16 at 23:12