Submit selection on Bootstrap typeahead() autocomplete?

Question

How do I autosubmit the selection made with Twitter Bootstrap typeahead()??

http://twitter.github.com/bootstrap/javascript.html#typeahead

Solution 1

Apparently there are a few git merge requests. This one does the job and allows you to send an array of objects to typeahead: https://github.com/twitter/bootstrap/pull/1751

Solution 2

There is a clean way using the updater callback:

input.typeahead({
    'source' : ['foo', 'bar'],
    'updater' : function(item) {
        this.$element[0].value = item;
        this.$element[0].form.submit();
        return item;
    }
});

When user selects an option (either by mouse click or keyboard), the callback populates the input box and sends the form.

Solution 3

If you use the external typeahead.js plugin (recommended for Bootstrap 3):

To trigger a form on select just use the custom events.

$('#my-input')
   .typeahead({/* put you options here */})
   .on('typeahead:selected', function(e){
     e.target.form.submit();
   });

More info on custom events here and demo about JSfiddle.

Solution 4

Might not be the best solution, but I just tried this on my typeahead setup locally and it worked.

If your typeahead looks something like this...

    <form id="test-form" method="post" action="">
            <input id="test-input" type="text" data-provide="typeahead" 
             data-source='["1","2',"3"]' />
    </form>

Then you can submit it with this javascript.

   <script type="text/javascript">
       $('#test-input').change(function() {
          $('#test-form').submit();
       });
   </script>  

View more solutions

Comments

[Nathan Waters]

Hmm just tried it out. Only seems to work when I directly select the option, but not when I hit enter or tab to select.

[Jako]

ya I understand it's not the best possible solution. But it was the only thing I could think of as a temporary fix.

[Kathan]

saved my life @HaNdTriX

[HaNdTriX]

I'm happy to hear that. :-)

[Hammad Khan]

field is selected (and populated) but form is not submitted. $('#search-box.typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', displayKey: 'value', source: substringMatcher(states), updater : function(item) { this.$element[0].value = item; this.$element[0].form.submit(); return item; } });