xử lý sự kiện được chọn trong twitter bootstrap Typeahead?

Question

tôi muốn chạy javascript chức năng ngay sau người dùng chọn một giá trị sử dụngtwitter bootstrap Typeahead

tôi tìm kiếm về một số điều như kiện được chọn

Answer 1

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

Answer 2

lần đầu tiên tôi đã đăng một câu trả lời trên đây (nhiều của thời gian tôi đã tìm thấy một câu trả lời ở đây mặc dù), vì vậy đây là sự đóng góp của tôi, hy vọng nó sẽ giúp. Bạn sẽ có thể phát hiện thay đổi - hãy thử cách này:

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

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

Answer 3

Tôi đã tạo tiện ích bao gồm tính năng đó.

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

Để giải thích về cách typeahead làm việc cho những gì bạn muốn làm ở đây, lấy ví dụ đoạn mã sau:

trường nhập

HTML:

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

Khối mã 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; 
    } 
}) 

Giải thích:

1. trường nhập của bạn được thiết lập như là một lĩnh vực typeahead với dòng đầu tiên: $('#my-input-field').typeahead(
2. Khi văn bản được nhập vào, nó cháy source: tùy chọn để lấy danh sách JSON và hiển thị nó cho người dùng.
3. Nếu người dùng nhấp vào một mục (hoặc chọn mục đó bằng các phím con trỏ và nhập), nó sẽ chạy tùy chọn updater:. Lưu ý rằng nó chưa cập nhật trường văn bản với giá trị được chọn.
4. Bạn có thể lấy mục đã chọn bằng biến số item và thực hiện những gì bạn muốn với biến đó, ví dụ: myOwnFunction(item).
5. Tôi đã bao gồm một ví dụ về việc tạo tham chiếu đến trường nhập chính nó $fld, trong trường hợp bạn muốn làm điều gì đó với nó. Lưu ý rằng bạn không thể tham chiếu trường bằng $ (this).
6. Bạn phải sau đó bao gồm dòng return item; trong tùy chọn updater: để trường nhập thực sự được cập nhật với biến số item.

Answer 6

Theo documentation của họ, cách thích hợp xử lý selected sự kiện là bằng cách sử dụng bộ xử lý này sự kiện:

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

}