在twitter引導中處理選定的事件Typeahead？

Question

我想用Twitter的引導事先鍵入的內容

我搜索的一些東西一樣選擇的事件

Answer 1

$('.typeahead').on('typeahead:selected', function(evt, item) { 
    // do what you want with the item here 
}) 

Answer 2

我第一次公佈的答案就在這裏（大量運行JavaScript函數剛過用戶選擇一個值但我在這裏找到了答案），所以這裏是我的貢獻，希望它有幫助。你應該能夠檢測到一個變化 - 試試這個：

function bob(result) { 
    alert('hi bob, you typed: '+ result); 
} 

$('#myTypeAhead').change(function(){ 
    var result = $(this).val() 
    //call your function here 
    bob(result); 
}); 

Answer 3

我創建了一個包含該功能的擴展。

https://github.com/tcrosen/twitter-bootstrap-typeahead

Answer 4

$('.typeahead').typeahead({ 
    updater: function(item) { 
     // do what you want with the item here 
     return item; 
    } 
}) 

Answer 5

要獲取預輸入工作方式的解釋，你想在這裏做，採取下面的代碼示例什麼：

HTML輸入字段：

<input type="text" id="my-input-field" value="" /> 

JavaScript代碼塊：

$('#my-input-field').typeahead({ 
    source: function (query, process) { 
     return $.get('json-page.json', { query: query }, function (data) { 
      return process(data.options); 
     }); 
    }, 
    updater: function(item) { 
     myOwnFunction(item); 
     var $fld = $('#my-input-field'); 
     return item; 
    } 
}) 

說明：

1. 你輸入字段設置爲預輸入字段的第一行：$('#my-input-field').typeahead(
2. 當輸入的文本，它激發了source:選項來獲取JSON列表，並將其顯示到用戶。
3. 如果用戶點擊某個項目（或使用光標鍵選擇並輸入），則會運行updater:選項。 請注意，它尚未使用所選值更新文本字段。
4. 您可以使用item變量抓取選定的項目，並根據您的需要進行操作。 myOwnFunction(item)。
5. 我已經包含了一個創建對輸入字段本身的引用$fld的例子，以防您想要使用它。 請注意，您無法使用$（this）來引用該字段。
6. 您必須然後在updater:選項內包含行return item;，所以輸入字段實際上更新與item變量。

Answer 6

根據他們documentation，處理selected事件的正確方式是使用此事件處理程序：

$('#selector').on('typeahead:select', function(evt, item) { 
    console.log(evt) 
    console.log(item) 
    // Your Code Here 
}) 

Answer 7

source: function (query, process) { 
    return $.get(
     url, 
     { query: query }, 
     function (data) { 
      limit: 10, 
      data = $.parseJSON(data); 
      return process(data); 
     } 
    ); 
}, 
afterSelect: function(item) { 
    $("#divId").val(item.id); 
    $("#divId").val(item.name); 

}