Question bootstrap-typeahead.js ajouter un écouteur à l'événement select


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

Ceci est mon code:

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

Comment puis-je ajouter 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?


48
2018-02-29 09:13


origine


Réponses:


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


0
2018-03-01 16:39



Tu devrais utiliser "mise à jour":

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

166
2017-07-31 19:12



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);
});

51
2018-05-12 08:49



Merci P.scheit pour votre réponse. Permettez-moi d'ajouter 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);
});

17
2017-08-08 08:23



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

15
2017-09-15 18:11



J'ai été en mesure de faire fonctionner ceci en regardant simplement l'événement "change" sur l'élément, que Twitter déclenche sur 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'a été 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)


5
2017-08-09 16:16



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

1
2017-11-22 06:24