Bootstrap Typeahead submit on select

The Twitter Bootstraps Typeahead is a very nice way to provide autocomplete functionality on your text inputs. However, the default configuration might be a bit confusing. When the user clicks on a suggestion in the dropdown menu, the utility populates the input but doesn’t submit the form. It’s usually ok, but sometimes (e.g: search boxes) it’s frustrating. Here’s how to change it:

1 var input = $('#your-input-box');
2 input.typeahead({
3     'source' : ['foo', 'bar', 'baz'],
4     'updater' : function(item) {
5         this.$element[0].value = item;
6         this.$element[0].form.submit();
7         return item;
8     }
9 });

This snippet autosubmits the form if the user clicks on a suggestion or selects it by keyboard.

Published: March 02, 2013.