How to change selection behaviour of Bootstrap's typeahead

Question

When using the typeahead functionality from Twitter Bootstrap (example) the first suggestion gets selected when I press TAB and when I press ENTER. However, when a user does NOT want to use one of the suggestions there is only one way to achieve this and that is grabbing the mouse and clicking on the submit button.

I want a way of doing this with only the keyboard, TAB or ARROW-UP both seem intuitive, but in both cases I can't get the default behaviour of Bootstrap to stop. I tried both preventDefault() and stopPropagation().

Answer 1

The way I solved this was by initializing the list with suggestions with the current query. So when pressing enter or tab the query is selected. When pressing arrow-down or arrow-up + enter a real suggestion is selected.

This is similar to what Chrome does when typing something in the url bar.