Autocomplete 是否在引导程序typeahead（）自动完成时提交所选内容？_Autocomplete_Twitter Bootstrap_Typeahead

Autocomplete 是否在引导程序typeahead（）自动完成时提交所选内容？

autocomplete twitter-bootstrap

Autocomplete 是否在引导程序typeahead（）自动完成时提交所选内容？,autocomplete,twitter-bootstrap,typeahead,Autocomplete,Twitter Bootstrap,Typeahead,如何自动提交使用Twitter引导程序typeahead所做的选择这可能不是最好的解决方案，但我只是在本地的typeahead设置上尝试了这个方法，效果很好如果你的typeahead看起来像这样 <form id="test-form" method="post" action=""> <input id="test-input" type="text" data-provide="typeahead" data-

如何自动提交使用Twitter引导程序typeahead所做的选择

这可能不是最好的解决方案，但我只是在本地的typeahead设置上尝试了这个方法，效果很好

如果你的typeahead看起来像这样

    <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>

显然有一些git合并请求。这一个完成了任务，允许您向typeahead发送一个对象数组：

我在输入上添加了一个模糊回调。请注意，您需要等待一小段时间，typeahead可以更改输入中的值，在此之前不会调用blur回调。这只是一个解决办法，但它是有效的

$('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);
});

有一种干净的方法可以使用更新程序回调：

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

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

如果您使用为Bootstrap 3推荐的外部插件：

要在选择时触发窗体，只需使用自定义事件

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

有关自定义事件和演示的更多信息。

要从typeahead数据选择填充html表单中隐藏字段的值，我执行了以下操作：

$('#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)
});

以下是html代码供参考：

<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>

嗯，我刚试过。只有当我直接选择选项时才有效，但当我按enter键或tab键选择时无效。我知道这不是最好的解决方案。但这是我唯一能想到的临时修复方法。如果你还在看的话，我为Typeahead插件创建了一个扩展，添加了一些功能，就像你问的那样。救了我的命@HaNdTriXI听到这个消息我很高兴-已选择并填充字段，但未提交表单。$'搜索框.typeahead'.typeahead{hint:true，highlight:true，minLength:1}，{name:'states'，displayKey:'value'，源：substringMatcherstates，更新程序：functionitem{this.$element[0]。value=item；this.$element[0]。form.submit；return item；}；