19

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

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

1

6 Answers 6

22

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.

1
  • 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; } });
    – TheTechGuy
    Commented Jul 20, 2018 at 17:55
11

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.

2
  • saved my life @HaNdTriX
    – Kathan
    Commented Jul 20, 2015 at 23:14
  • I'm happy to hear that. :-)
    – HaNdTriX
    Commented Jul 21, 2015 at 10:52
7

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>  
1
  • 2
    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. Commented Feb 25, 2012 at 8:40
3

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

1
  • ya I understand it's not the best possible solution. But it was the only thing I could think of as a temporary fix.
    – Jako
    Commented Feb 28, 2012 at 16:40
0

I added a blur callback on the input. Be aware that you need to wait for a short period, that typeahead can change the value in the input and the blur callback is not called before that. It's just a workaround, but it works.

$('input.myTypeaheadInput').blur(function(e) {
    window.setTimeout(function() {
        window.console && console.log('Works with clicking on li item and navigating with the keyboard. Yay!');
    }, 50);
});
0

To populate a value of a hidden field in an html form from the typeahead data selection, I did the following:

$('#prefetch').typeahead({
 hint: true,
 highlight: true,
 minLength: 1
},
{
 name: 'trees',
 source: trees,
 limit: 15 
}).on('typeahead:selected', function(e) {
 var result = $('#prefetch').val()
 $('#formpane input[name=\"myID\"]').val(result)
});

For reference, here's the html code:

<body>
 <div id="formpane">
  <form action="/thanks" method="POST">
    <input class="typeahead" type="text" placeholder="select categories" id="prefetch">
    <button type="submit">Submit</button>
    <input type="hidden" name="myID" />
  </form>
 </div>
<script type="text/javascript" src="js_file_above.js"></script>
</body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.