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>
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: