bootstrap-typeahead.js aggiungi un ascoltatore sull'evento selezionato

Question

Sono nuovo nel framework di Bootstrap su Twitter e ho bisogno di utilizzare bootstrap-typeahead.js per il completamento automatico, ma devo anche ottenere il valore selezionato dall'utente per il typeahead.

Questo è il mio codice:

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

Come posso aggiungere un listener per ottenere il valore selezionato dal tipo typeahead e passarlo in una funzione? Per esempio quando uso ExtJS, applico questa struttura:

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

Come posso fare qualcosa di simile con un typeahead?

Answer 1

Prova this fork of typeahead. Ti dà un evento onselect, popolazione asincrona e altro!

Answer 2

si dovrebbe usare "aggiornamento":

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

Answer 3

Sono stato in grado di ottenere questo lavoro semplicemente guardando l'evento 'cambiamento' sull'elemento, che spara Twitter Bootstrap typeahead su Seleziona.

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

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

Uscite "Modificate: test1" quando l'utente seleziona test1.

NOTA: L'evento viene attivato anche quando l'utente preme "Invio" anche se non viene trovata alcuna corrispondenza, quindi è necessario decidere se è quello che si desidera. Soprattutto, se l'utente inserisce "te" e quindi fa clic su "test1", verrà visualizzato un evento per "te" e un evento per "test1", che è possibile che si desideri eseguire il rimbalzo.

(versione 2.0.2 Twitter Bootstrap typeahead)

Answer 4

Ho avuto lo stesso problema. È possibile utilizzare questa funzione per rendere i vostri eventi personalizzati: https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed (di aggiungere ulteriori eventi si deve conoscere la struttura del prototipo typeahead)

Answer 5

In v3 Twitter typeahead bootstrap sarà caduto un sostituito con il cinguettio typeahead (che ha la funzione che si vuole e molto di più)

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

utilizzo in questo modo:

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

Answer 6

Grazie P.scheit per la risposta. Consentitemi di aggiungere questo alla vostra soluzione che gestisce il completamento automatico quando l'utente preme il tasto Tab.

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

Answer 7

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

Answer 8

è possibile utilizzare 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(); 
    } 
}); 

Answer 9

Heres la soluzione con il multi-evento per schede e selezionati:

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