обрабатывать выбранное событие в твиттере - PullRequest
19 голосов
/ 03 марта 2012

я хочу запустить функцию javascript сразу после пользователь выбирает значение , используя начальную загрузку в Twitter Typeahead

я ищу что-то вроде выбранного события

Ответы [ 7 ]

35 голосов
/ 28 марта 2013
$('.typeahead').on('typeahead:selected', function(evt, item) {
    // do what you want with the item here
})
16 голосов
/ 25 декабря 2012
$('.typeahead').typeahead({
    updater: function(item) {
        // do what you want with the item here
        return item;
    }
})
6 голосов
/ 30 мая 2013

Для объяснения того, как 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;
    }
})

Объяснение:

  1. Ваше поле ввода установлено как поле ввода заголовка с первой строкой: $('#my-input-field').typeahead(
  2. При вводе текста запускается *Параметр 1015 * для извлечения списка JSON и его отображения пользователю.
  3. Если пользователь щелкает элемент (или выбирает его с помощью клавиш курсора и ввода), он затем запускает параметр updater:. Обратите внимание, что оно еще не обновило текстовое поле с выбранным значением .
  4. Вы можете получить выбранный элемент, используя переменную item, и делать с ним все, что хотите, например myOwnFunction(item).
  5. Я включил пример создания ссылки на само поле ввода $fld, на случай, если вы захотите что-то с ним сделать. Обратите внимание, что вы не можете ссылаться на поле, используя $ (this) .
  6. . Вы должны , затем включите строку return item; в опцию updater:, чтобыполе ввода фактически обновляется с помощью переменной item.
5 голосов
/ 22 марта 2012

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

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

$('#myTypeAhead').change(function(){
    var result = $(this).val()
    //call your function here
    bob(result);
});
3 голосов
/ 17 июля 2016

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

$('#selector').on('typeahead:select', function(evt, item) {
    console.log(evt)
    console.log(item)
    // Your Code Here
})
2 голосов
/ 04 апреля 2012

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

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

1 голос
/ 14 сентября 2017
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);

}
...