web-dev-qa-db-fra.com

Gérer l'événement sélectionné dans Twitter bootstrap Typeahead?

Je veux exécuter la fonction Javascript juste après l'utilisateur sélectionne une valeur en utilisant Twitter bootstrap Typeahead.

Je recherche quelque chose comme un événement sélectionné.

javascriptjquerytwitter-bootstrapeventsjquery-events
20
George Botros
$('.typeahead').on('typeahead:selected', function(evt, item) {
    // do what you want with the item here
})
35
drow
$('.typeahead').typeahead({
    updater: function(item) {
        // do what you want with the item here
        return item;
    }
})
16
Marcilio Leite

Pour une explication du fonctionnement de typeahead pour ce que vous voulez faire ici, en prenant l'exemple de code suivant:

Champ de saisie HTML:

<input type="text" id="my-input-field" value="" />

Bloc de code 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;
    }
})

Explication:

  1. Votre champ de saisie est défini comme un champ de saisie avec la première ligne: $('#my-input-field').typeahead(
  2. Lorsque du texte est entré, il déclenche l'option source: Pour récupérer la liste JSON et l'afficher à l'utilisateur.
  3. Si un utilisateur clique sur un élément (ou le sélectionne avec les touches de curseur et entre), il exécute alors l'option updater:. Notez qu'il n'a pas encore mis à jour le champ de texte avec la valeur sélectionnée.
  4. Vous pouvez saisir l'élément sélectionné à l'aide de la variable item et faire ce que vous voulez, par exemple myOwnFunction(item).
  5. J'ai inclus un exemple de création d'une référence au champ de saisie lui-même $fld, Au cas où vous voudriez en faire quelque chose. Notez que vous ne pouvez pas référencer le champ à l'aide de $ (this).
  6. Tu doit incluez ensuite la ligne return item; dans l'option updater: pour que le champ de saisie soit réellement mis à jour avec la variable item.
6
MichaelJTaylor

la première fois que j'ai posté une réponse ici (beaucoup de fois j'ai trouvé une réponse ici cependant), alors voici ma contribution, j'espère que cela aide. Vous devriez pouvoir détecter un changement - essayez ceci:

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

$('#myTypeAhead').change(function(){
    var result = $(this).val()
    //call your function here
    bob(result);
});
5
paulSbarlow

Selon leur documentation , la bonne façon de gérer l'événement selected est d'utiliser ce gestionnaire d'événements:

$('#selector').on('typeahead:select', function(evt, item) {
    console.log(evt)
    console.log(item)
    // Your Code Here
})
3
Artur Grigio

J'ai créé une extension qui inclut cette fonctionnalité.

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

2
Terry
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);

}
1
shijinmon Pallikal