Bootstrap-typeahead.js добавляет слушателя на событие select

Я новичок в платформе Bootstrap Twitter, и мне нужно использовать bootstrap-typeahead.js для автозаполнения, но мне также нужно получить значение, выбранное пользователем для typeahead.

Это мой код:

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

Как добавить слушателя для получения выбранного значения из типа typeahead и передать его в функции? Например, когда я использую ExtJs, я применяю эту структуру:

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

Как я могу сделать что-то подобное с typeahead?

Ответ 1

Попробуйте эту вилку typeahead. Это дает вам событие onselect, асинхронную популяцию и многое другое!

Ответ 2

вы должны использовать " updater":

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

Ответ 3

В v3 twitter bootstrap typeahead будет отброшен на замену на twitter typeahead (у которого есть функция, которую вы хотите, и многое другое)

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

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

Ответ 4

Спасибо P.scheit за ваш ответ. Позвольте мне добавить это к вашему решению, которое обрабатывает автозаполнение, когда пользователь нажимает клавишу табуляции.

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

Ответ 5

вы можете использовать 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();
    }
});

Ответ 6

Мне удалось получить эту работу, просто просмотрев событие "change" на элементе, который щелкает Bootstrap Typeahead при выборе.

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

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

Выходы "Изменено: test1", когда пользователь выбирает test1.

ПРИМЕЧАНИЕ. Он также запускает событие, когда пользователь нажимает "Enter", даже если совпадение не найдено, поэтому вам нужно решить, что вы хотите. В частности, если пользователь вводит "te", а затем нажимает "test1", вы получите событие для "te" и событие для "test1", которое вы можете захотеть отменить.

(Версия 2.0.2 Twitter Bootstrap Typeahead)

Ответ 7

Здесь используется решение с несколькими событиями для вкладок и выбранных:

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

Ответ 8

У меня была та же проблема. Вы можете использовать эту функцию для создания своих пользовательских событий: https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed (чтобы добавить больше событий, вы должны знать структуру прототипа типа)

Ответ 9

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