Обрабатывать выбранное событие в twitter bootstrap Typeahead?

Ответ 1

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

Ответ 2

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

Ответ 3

В первый раз я отправил ответ здесь (много раз я нашел здесь ответ), так что вот мой вклад, надеюсь, это поможет. Вы должны иметь возможность обнаружить изменение - попробуйте следующее:

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

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

Ответ 4

Для объяснения того, как typeahead работает для того, что вы хотите сделать здесь, следуя приведенному ниже примеру кода:

Поле ввода 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;
    }
})

Пояснение:

• Ваше поле ввода задается как поле typeahead с первой строкой: $('#my-input-field').typeahead(
• При вводе текста он запускает параметр source: для извлечения списка JSON и отображения его пользователю.
• Если пользователь нажимает на элемент (или выбирает его с помощью клавиш курсора и вводит), он затем запускает параметр updater:. Обратите внимание, что он еще не обновил текстовое поле с выбранным значением.
• Вы можете захватить выбранный элемент с помощью переменной item и делать то, что вы хотите с ней, например. myOwnFunction(item).
• Я включил пример создания ссылки на само входное поле $fld, если вы хотите что-то с этим сделать. Обратите внимание, что вы не можете ссылаться на поле, используя $(this).
• Затем вы должны включить строку return item; в параметр updater:, чтобы поле ввода фактически обновлялось с помощью переменной item.

Ответ 5

Я создал расширение, которое включает эту функцию.

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

Ответ 6

В соответствии с их документацией правильный способ обработки события selected заключается в использовании этого обработчика событий:

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

Ответ 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);

}