在Bootstrap typeahead（）自動完成上提交選擇？

如何自動提交使用Twitter Bootstrap typeahead（）進行的選擇？在Bootstrap typeahead（）自動完成上提交選擇？

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

2012-02-24 Nathan Waters

如果您我仍然在尋找，我爲Typeahead插件創建了一個擴展，以添加一些功能，例如您詢問的功能。 https://github.com/tcrosen/Bootstrap-Typeahead-Extension – Terry 2012-04-04 00:22:24

顯然有一些git合併請求。這個人做這項工作，並允許您發送一系列對象以提前打印：https://github.com/twitter/bootstrap/pull/1751

來源

2012-02-25 09:06:48

雅我明白這不是最好的解決方案。但這是我唯一能夠想到的臨時性解決方案。 – Jako 2012-02-28 16:40:02

可能不是最好的解決辦法，但我只是想這對我的預輸入設置本地和它的工作。

如果您的預輸入看起來是這樣的......

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

來源

2012-02-24 06:07:10 Jako

嗯只是試了一下。只有當我直接選擇選項時才起作用，但當我按Enter或Tab選擇時似乎不起作用。 – 2012-02-25 08:40:49

我在輸入上添加了一個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); 
});

來源

2012-05-18 07:51:57 mAu

存在使用updater回調一個乾淨的方式：

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

當用戶（通過鼠標點擊或鍵盤）選擇一個選項，該回調填充輸入框和發送形式。

來源

2013-03-02 21:16:45 erenon

可悲的是，這個輝煌的選項似乎並沒有出現在最近的版本.. – 2016-02-05 17:50:17

如果使用外部typeahead.js插件（推薦用於引導3）：

要觸發選擇只使用自定義事件的形式。

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

自定義事件here和演示約JSfiddle更多信息。

來源

2013-08-28 09:13:24 HaNdTriX

拯救了我的生命@HaNdTriX – Kathan 2015-07-20 23:14:52

我很高興聽到這一點。 :-) – HaNdTriX 2015-07-21 10:52:54

爲了從預輸入數據選擇一個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>

來源

2015-06-15 22:38:42

在Bootstrap typeahead（）自動完成上提交選擇？

回答

相關問題