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

要在选择时触发表单，只需使用自定义事件。

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

有关自定义活动的更多信息here以及有关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合并请求。这个可以完成这项工作，并允许您将一组对象发送到typeahead：https://github.com/twitter/bootstrap/pull/1751

Answer 5

我在输入上添加了blur回调。请注意，您需要等待一段时间，即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);
});

Answer 6

要从先行数据选择中填充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>

在Bootstrap typeahead（）自动完成上提交选择？

6 个答案: