bootstrap-typeahead.js在選擇事件中添加監聽器

Question

我是Bootstrap Twitter框架的新手，我需要使用bootstrap-typeahead.js來自動完成，但我還需要獲取用戶爲預輸入。

這是我的代碼：

<input type="text" class="span3" style="margin: 0 auto;" 
        data-provide="typeahead" data- items="4" 
        data-source='["Alabama","Alaska"]'> 

我怎樣才能添加一個偵聽器，以獲得從類型預輸入所選的值，並通過它的功能？例如，當我使用ExtJs時，我應用了這種結構：

listeners: { 
    select: function(value){ 
    ........ 
    } 
} 

我該怎麼做類似於typeahead？

Answer 1

嘗試this fork of typeahead。它給你一個選擇事件，異步人口和更多！

Answer 2

你應該使用「更新」：

$('#search-box').typeahead({ 

    source: ["foo", "bar"], 

    updater:function (item) { 

     //item = selected item 
     //do your stuff. 

     //dont forget to return the item to reflect them into input 
     return item; 
    } 
}); 

Answer 3

我已經能夠通過簡單地看元素的‘改變’事件，就選擇這Twitter的引導火災事先鍵入的內容得到這個工作。

var onChange = function(event) { 
    console.log "Changed: " + event.target.value 
}; 

$('input.typeahead').typeahead({ source: ['test1', 'test2'] }); 
$('input.typeahead').on('change', onChange); 

當用戶選擇test1時，輸出'Changed：test1'。

注意：即使沒有找到匹配項，當用戶按下「Enter」鍵時也會觸發事件，因此您必須決定這是否是您想要的。尤其是，如果用戶輸入「te」然後單擊「test1」，您將獲得「te」的事件和「test1」的事件，您可能想要刪除該事件。

（版本2.0.2 Twitter的引導事先鍵入的內容）

Answer 4

我有同樣的問題。您可以使用此功能，使您的自定義事件：https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed （添加你要知道預輸入原型結構更加事件）

Answer 5

在V3 Twitter的引導預輸入將被丟棄與Twitter的預輸入的更換（其具有以下特徵：您想和更多）

https://github.com/twitter/typeahead.js

用法是這樣的：

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) { 
    console.log(datum); 
}); 

Answer 6

感謝P.scheit你的答案。讓我把這個添加到你的解決方案中，該解決方案在用戶按Tab鍵時處理自動完成。

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) { 
    console.log(datum); 
}).on('typeahead:autocompleted', function (e, datum) { 
    console.log(datum); 
}); 

Answer 7

$('input.typeahead').typeahead({ 
    source: ['test1', 'test2'], 
    itemSelected: function(e){ 
     ---your code here--- 
    } 
}); 

Answer 8

可以使用afterSelect

$('#someinput').typeahead({ 
    source: ['test1', 'test2'], 
    afterSelect: function (item) { 
     // do what is needed with item 
     //and then, for example ,focus on some other control 
     $("#someelementID").focus(); 
    } 
}); 

Answer 9

繼承人與標籤式和選擇的多事件的解決方案：

$('#remote .typeahead').on(
    { 
     'typeahead:selected': function(e, datum) { 
      console.log(datum); 
      console.log('selected'); 
     }, 
     'typeahead:autocompleted': function(e, datum) { 
      console.log(datum); 
      console.log('tabbed'); 
     } 
});