jQuery .focusout / .cliquez sur le conflit

Je suis en train de travailler sur un projet avec une saisie semi-automatique "searchbox". Maintenant, j'ai le problème que je veux passer la valeur du autocompleteresults à la zone de saisie, mais en même temps, je veux le autocompletebox à cacher quand les inputfield n'est pas plus précis.

Maintenant, j'ai un conflit en cours avec les deux d'entre eux depuis le cliquez sur le autocompletebox est considéré comme focusout et masquer la boîte avant même de pouvoir passer la valeur. Tous les pointeurs ou des solutions de contournement pour ce genre de problème? Ici un jsfiddle pour le rendre plus clair pour vous.

http://jsfiddle.net/KeGvM/

Ou ici

CSS:

#a_c {display:none;}​

JS:

$('#search_field').focusout(function() {
    $('#a_c').hide(); //IF I DELETE THIS IT WORKS
});

$('#search_field').focusin(function() {
    $('#a_c').show();
});

$('#a_c a').click(function() {
    $('#search_field').val('');
    var value = $(this).text();
    var input = $('#search_field');
    input.val(input.val() + value);
    $('#a_c').hide();
    return false;
});​

HTML:

<input autocomplete="off" onkeyup="searchFor(this.value);" name="search" id="search_field" class="bold" type="text" placeholder="Search...">
<div id="a_c"><a href="">hello world</a></div>​

OriginalL'auteur Johnny000 | 2012-12-20

  1. 24

    Ma solution dans la même situation a été à l'aide de délai d'attente pour retenir temporairement hors de l'action prise en blur gestionnaire d'événement. Comme ceci:

    $('#search_field').focusout(function() {
    window.setTimeout(function() { $('#a_c').hide() }, 100);
});
    Très bonne solution de contournement de l'omi. Merci pour la réponse rapide!
    j'ai eu un problème similaire, comme l'op, et j'ai décidé d'utiliser cette sale fixer comme une solution de dernier recours et im sur une date limite doit corriger cela le plus vite possible). Cela met les événements en condition de course, et c'est une très très mauvaise pratique. je vais l'utiliser, merci pour cette réponse, mais downvote. en attente d'une meilleure réponse.

    OriginalL'auteur

  2. 25

    Comment sur l'utilisation de

    :hover

    J'ai résolu le même problème à l'utiliser.

    $('className').on('focusout', function(e) {
    if($('.suggestLi' + ':hover').length) {
        return;
    }
    $('.suggestList').empty();
});
    Je pense que c'est la meilleure solution. Je l'ai utilisé et il fonctionne parfaitement. Merci!
    C'est la solution la plus élégante que j'ai trouvé sur internet. Merci.
    De ne pas fonctionner si la souris passe dessus suggestList et je vous appuyez sur la touche TAB (comme passer à côté de l'entrée) (au lieu de la souris) JSFIDDLE

    OriginalL'auteur