Получить значение выбранных элементов для заголовка Bootstrap

Question

Bootstrap только что реализовал удобную функцию автозаполнения, которая называется typeahead.У меня возникают проблемы при получении соответствующего значения для ввода текста.

Например, у меня может быть следующее:

$('input').on('change', function(){
    console.log($(this).val());
});

Это не похоже на захват выбранного значения.Кто-нибудь знает, как получить выбранное значение, используя typeahead с Bootstrap?

Answer 1

$('#autocomplete').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});
$('#autocomplete').on('typeahead:cursorchanged', function (e, datum) {
    console.log(datum);
});

Кажется, что Typeahead изменил слушателей, и их использование плохо документировано. Вы можете использовать этих слушателей.

UPDATE

Имя события было изменено на typeahead:select в более поздних версиях.

Answer 2

Вы смотрите на это не с того угла.Метод typeahead в Bootstrap предоставляет опцию, которая позволяет вам передавать функцию обратного вызова, которая получает выбранное значение в качестве аргумента.Ниже приведен сжатый пример, иллюстрирующий только этот аргумент.

$('#typeaheadID').typeahead({
    updater: function(selection){
        console.log("You selected: " + selection)
    }
})

ура! справочная документация

Answer 3

Я работаю с этим, и у меня сейчас та же проблема. Я планирую решить эту проблему с помощью этой симпатичной вилки

https://gist.github.com/1891669

И я сделал это с обратным вызовом:

  $('.typeahead').typeahead({
    // note that "value" is the default setting for the property option
    source: [{value: 'Charlie'}, {value: 'Gudbergur'}, ...],
    onselect: function(obj) { console.log(obj) }
  })

Надеюсь, вам это тоже поможет.

Answer 4

Если у вас только 1 на странице, вы можете попробовать $('ul.typeahead li.active').data('value');, но у вас могут возникнуть проблемы, если на странице их больше 1.

Интересно, есть ли причина, по которой входное значение неустановлен

Answer 5

$('#myselector').typeahead({
itemSelected:function(data,value,text){
   console.log(data)
    alert('value is'+value);
    alert('text is'+text);
},
//your other stuffs
});

Вы должны просто передать itemSelected в функцию обратного вызова, и она выдаст вам выбранный элемент.

Надеюсь, это сработает для вас.

Answer 6

Если вы используете другую кнопку для работы с выбранным элементом или вам нужно получить этот элемент не сразу после обновления, вы можете использовать $("#your_input").next("ul").find("li.active").data("value"); для получения значения.

Работает на ajax с начальной загрузкой.