web-dev-qa-db-fra.com

Obtenir la valeur des éléments sélectionnés pour la typeahead de Bootstrap

Bootstrap vient d'implémenter une fonctionnalité soignée de complétion automatique appelée typeahead. Je ne parviens pas à obtenir la valeur appropriée pour la saisie de texte.

Par exemple, je pourrais avoir ce qui suit:

$('input').on('change', function(){
    console.log($(this).val());
});

Cela ne semble pas capturer la valeur sélectionnée. Est-ce que quelqu'un sait comment obtenir la valeur sélectionnée en utilisant typeahead avec Bootstrap?

jquerytwitter-bootstraptypeahead
12
T.S.

Si vous n'en avez eu qu'un sur la page, vous pouvez essayer $('ul.typeahead li.active').data('value');, mais vous pouvez avoir des problèmes s'il y en a plus d'un sur une page.

Je me demande s'il y a une raison pour laquelle la valeur d'entrée n'est pas définie?

4
kendaleiv
$('#autocomplete').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});
$('#autocomplete').on('typeahead:cursorchanged', function (e, datum) {
    console.log(datum);
});

Semble Typeahead a changé les auditeurs et les usages ne sont pas bien documentés. Vous pouvez utiliser ces écouteurs.

METTRE À JOUR

Le nom de l'événement a été changé en dactylographie: sélectionnez dans les versions ultérieures. 

42
ymutlu

Vous le regardez sous le mauvais angle. La méthode typeahead de Bootstrap fournit une option qui vous permet de transmettre une fonction de rappel qui reçoit la valeur sélectionnée en tant qu'argument. Vous trouverez ci-dessous un exemple condensé illustrant uniquement cet argument.

$('#typeaheadID').typeahead({
    updater: function(selection){
        console.log("You selected: " + selection)
    }
})

cheers! documentation refernece

20
Secesh

Je travaille avec cela et j'ai le même problème en ce moment. Je prévois de le résoudre avec cette jolie fourchette 

https://Gist.github.com/1891669

Et je l'ai fait avec un rappel:

  $('.typeahead').typeahead({
    // note that "value" is the default setting for the property option
    source: [{value: 'Charlie'}, {value: 'Gudbergur'}, ...],
    onselect: function(obj) { console.log(obj) }
  })

J'espère que ça vous aide aussi.

7
vanhalt
$('#myselector').typeahead({
itemSelected:function(data,value,text){
   console.log(data)
    alert('value is'+value);
    alert('text is'+text);
},
//your other stuffs
});

Vous devez simplement passer itemSelected dans la fonction de rappel et elle vous donnera l'élément sélectionné.

J'espère que cela fonctionnera pour vous.

2
Mr.k

Si vous utilisez un autre bouton pour travailler avec l'élément sélectionné ou si vous devez obtenir cet élément pas après la mise à jour, vous pouvez utiliser $("#your_input").next("ul").find("li.active").data("value"); pour obtenir votre valeur.

Travailler pour ajax bootstrap typeahead.

0
Filip Kováč