在Bootstrap typeahead()自动完成上提交选择？

Question

如何自动提交使用Twitter Bootstrap typeahead()进行的选择？

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

Answer 1

使用updater回调有一种干净的方式:

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

当用户选择一个选项(通过鼠标单击或键盘)时,回调将填充输入框并发送表单.

Answer 2

如果您使用外部typeahead.js插件(建议用于Bootstrap 3):

要在select上触发表单,只需使用自定义事件即可.

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

有关自定义事件的详细信息在这里和演示有关的jsfiddle.

Answer 3

可能不是最好的解决方案,但我只是在我的本地设置上尝试了这个并且它有效.

如果你的先行者看起来像这样......

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

然后你可以用这个javascript提交它.

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

Answer 4

显然有一些 git 合并请求。这个可以完成这项工作，并允许您发送一组对象进行预先输入：https://github.com/twitter/bootstrap/pull/1751