Comment obtenir Bootstrap typeahead cliquez sur le résultat avant de l'entrée d'événement de changement de

Ma suggestion précédente n'a pas fait de travail parce que, comme vous l'avez mentionné, il y a un peu inattendu blur événement à l'origine de la change avant événement le click sur le menu. J'avais supposé que c'était lié à la this.hide() appeler à l'intérieur de la Typeahead.prototype.select méthode.

Cependant, après un peu d'essais et d'erreurs, je pense que j'ai peut-être trouvé un solution de contournement. Ce n'est pas vraiment le this.hide() appel à l'intérieur de la select méthode qui est à l'origine du problème. Sachant qu'il y a deux façons que l'utilisateur peut déclencher de sélection permet de comprendre l'espérons-le, de travail d'une solution (j'ai testé uniquement dans Chrome): à l'aide du clavier, comme en appuyant sur entrée ou en cliquant sur l'élément. En conséquence, sachant que le clic est le problème de l'enfant de les deux, j'ai remarqué que le mousedover événement est maintenu lorsque l'utilisateur passe la souris sur le menu déroulant.

Comme un résultat, le comportement étrange peut être manuellement ignoré dans un change événement. Pour simplifier le processus de détermination de ce qui cause réellement la prochaine change cas j'ai utilisé un autre (personnalisé) événement appelé "selected" pour désigner l'utilisateur a modifié la valeur plutôt que d'une norme change. Malheureusement, vous devez manuellement ignorer change événements lorsque le mousedover propriété est true:

Simplifié en HTML (j'ai utilisé le p balise parce que je trouve que Chrome a de la difficulté avec le débogage JSFiddle du JavaScript, et en les combinant avec la console de conduire à un mauvais moment):

<input class="typeahead " type="text" placeholder="contact" value="Peter skillet"></input>
<input type="text"></input>
<p id="text" />

JavaScript (texte peut être remplacé par console.log pour ceux qui s'intéressent à l'aise):

var contacts = ['pete', 'geoffrey'];

var $text = $("#text");
var typeahead = $('.typeahead').typeahead({source: contacts}).data('typeahead');

typeahead.select = function () {
    var val = this.$menu.find('.active').attr('data-value');
    this.$element.val(this.updater(val))
        .trigger('selected'); //<- unique event
    return this.hide()
};

$('input.typeahead').on('change', function (e) {
    var $target = $(e.target);
    if (typeahead.mousedover) {
        $text.html($text.html() + "mousedover [ignored selection]<br />");
    }
    else if ($.inArray($target.val(), contacts) < 0) {
        $text.html($text.html() + "show add<br/>");
    }
}).on('selected', function () {
    $text.html($text.html() + "selected<br />");
});

Pour la référence, c'est la valeur par défaut select méthode:

select: function () {
  var val = this.$menu.find('.active').attr('data-value')
  this.$element
    .val(this.updater(val))
    .change()
  return this.hide()
}

OriginalL'auteur pickypg