web-dev-qa-db-fra.com

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

Je suis nouveau dans le cadre Twitter Bootstrap), et j’ai besoin d’utiliser bootstrap-typeahead.js pour la saisie semi-automatique, mais j’ai également besoin d’obtenir la valeur sélectionnée par l’utilisateur pour la tête de frappe.

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 auditeur pour obtenir la valeur sélectionnée à partir du type typeahead et la transmettre à une fonction? Par exemple, lorsque j'utilise ExtJs, j'applique cette structure:

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

Comment puis-je faire quelque chose de similaire avec une tête de frappe?

jqueryjquery-uitwitter-bootstrap
52
jack.cap.rooney

vous devriez utiliser "pdater":

$('#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
Capy

Dans la v3, Twitter bootstrap typeahead sera supprimé et remplacé par le typeahead Twitter (qui contient la fonctionnalité que vous souhaitez et bien plus encore)

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

utilisation comme ceci:

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

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

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

J'ai pu obtenir ce fonctionnement en observant simplement l'événement "change" de l'élément sur lequel Twitter Bootstrap Typeahead se déclenche sur select.

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

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

Les 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" et clique sur "test1", vous obtiendrez un événement pour "te" et un événement pour "test1", que vous voudrez peut-être supprimer.

(Version 2.0.2 Twitter Bootstrap Typeahead)

5
Hollownest

Voici la solution avec le multi-événement sur pour 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');
        }
});
3
Abs

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 ajouter d'autres événements que vous avez connaître la structure du prototype)

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