bootstrap-typeahead.js append un écouteur à l’événement select

Je suis nouveau dans le framework Twitter Bootstrap, et je dois utiliser bootstrap-typeahead.js pour autocomplétion mais je dois aussi obtenir la valeur sélectionnée par l’utilisateur pour la saisie.

Ceci est mon code:

 

Comment puis-je append un écouteur pour obtenir la valeur sélectionnée à partir de type typeahead et la transmettre dans une fonction? Par exemple, lorsque j’utilise ExtJs, j’applique cette structure:

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

Comment est-ce que je peux faire quelque chose de similaire avec une tête de frappe?

Essayez cette fourchette de typeahead . Cela vous donne un événement unique, une population asynchrone et plus encore!

vous devez utiliser ” 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; } }); 

Dans v3, le script de démarrage de bootstrap sera remplacé par le type de saisie twitter (qui a la fonctionnalité que vous voulez et beaucoup plus)

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

utilisation comme ceci:

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

Merci P.scheit pour votre réponse. Permettez-moi d’append ceci à votre solution qui gère l’auto-complétion lorsque l’utilisateur appuie sur la touche de tabulation.

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

Vous pouvez utiliser 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(); } }); 

J’ai été en mesure de faire fonctionner ceci en regardant simplement l’événement “change” sur l’élément, que Twitter lance Bootstrap Typeahead sur select.

 var onChange = function(event) { console.log "Changed: " + event.target.value }; $('input.typeahead').typeahead({ source: ['test1', 'test2'] }); $('input.typeahead').on('change', onChange); 

Sorties ‘Changed: test1’ lorsque l’utilisateur sélectionne test1.

REMARQUE: il déclenche également l’événement lorsque l’utilisateur appuie sur “Entrée” même si aucune correspondance n’est trouvée. Vous devez donc décider si c’est ce que vous voulez. En particulier, si l’utilisateur entre “te” puis clique sur “test1”, vous obtiendrez un événement pour “te” et un événement pour “test1”, que vous voudrez peut-être éliminer.

(Version 2.0.2 Twitter Bootstrap Typeahead)

Voici la solution avec multi-événement sur onglet et sélectionné:

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

J’ai eu le même problème. Vous pouvez utiliser cette fonction pour créer vos événements personnalisés: https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed (pour append d’autres événements, vous devez connaître la structure des prototypes)

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