Ecriture d'un champ de recherche avec suggestions. Problème de mise au point Javascript

Question

Je suis donc en train d'écrire un champ de recherche pour mon site web. Au fur et à mesure que l'utilisateur tape, une boîte apparaît sous le champ avec des suggestions de recherche. Les suggestions sont navigables au clavier et cliquables.

Cependant, j'ai des difficultés à faire disparaître les suggestions lorsque l'utilisateur clique ailleurs sur la page. J'ai ajouté un gestionnaire onBlur() au champ de recherche, mais lorsque l'utilisateur clique sur l'une des suggestions, le flou se produit avant le clic, faisant disparaître la boîte de suggestions et l'événement click se produit dans l'espace mort au lieu de suggestion.

Voici ce que mon HTML ressemble à:

<input type="text" id="search_field" onBlur="hideSuggestions()" /> 
<div id="suggestions_box"> 
    <ul> 
    <li onClick="doSomething(1)">suggestion1</li> 
    <li onClick="doSomething(2)">suggestion2</li> 
    </ul> 
</div> 

La question est, comment puis-je cacher l'élément suggestions_box lorsque le focus quitte le champ de recherche, sauf lorsque le nouvel élément avec mise au point est les suggestions boîte?

Answer 1

Gardez vos suggestions boîte div à l'intérieur de votre étiquette de formulaire, puis mettez le onBlur sur le formulaire. Je pense que cela fonctionnera, mais je ne peux pas le tester pour le moment. La référence javascript de w3schools indique que la balise de formulaire supporte onblur, mais je ne sais pas si cela signifie qu'elle doit être sur un élément de formulaire, ou juste dans la balise de formulaire. [/ Edit]

Answer 2

Essayez ceci.

d'abord, assurez-vous de passer l'événement blur à votre fonction hideSuggestions:

<input type="text" id="search_field" onblur="hideSuggestions(event)" /> 

Ensuite, vérifiez si le flou a été causé par un événement dans la boîte de suggestions:

function hideSuggestions(event) { 
    var target = event.relatedTarget || event.toElement, 
     suggestions = document.getElementById('suggestions_box'); 

    if (contains(suggestions, target)) 
     // user did something inside suggestions box. 
     return; // Do nothing. 

    // box hiding code as before... 
} 

// contains(haystack, needle): fast lookup of whether haystack is a parent of needle. 
var contains = document.compareDocumentPosition 
      ? function(a, b) { return !!(a.compareDocumentPosition(b) & 16) } 
      : function(a, b) { return a !== b && (a.contains ? a.contains(b) : true) }; 

Answer 3

J'ai eu la même problème et rencontrer cette question. J'utilise aussi jQuery et mouseout semble être le seul événement ayant relatedTarget. En fait, aucun des navigateurs actuels ne supporte probablement cela (il suffit de cocher Firefox 4 et IE 9). J'ai résolu cela en utilisant mousedown sur le document. J'ai une variable indiquant une recherche en cours. Si un mousedown se produit dans cet état, je vérifie simplement si la cible cliquée a une certaine classe, qui est seulement utilisée pour choisir une suggestion. Dans tous les autres cas, les suggestions sont cachées. Event.target est un élément jQuery où vous pouvez rechercher toutes sortes de choses comme nodeName, id et className.

$(document).mousedown(function(event) { 
if (ongoingSearch) { 
    if (event.target.className != "uniqueClassname") { 
     hideSuggestions(); 
    } 
} 

});

Answer 4

Ici, vous pouvez utiliser css. Aucun script Java n'est requis.

Le CSS sera comme suit.

#search_field:focus+#search_box 
{ 
    display:block; 
} 
#search_box 
{ 
    display:none; 
} 

Answer 5

<input type="text" id="search_field" onBlur="hideSuggestions()" /> 
    <div id="suggestions_box"> 
     <ul> 
     <li onClick="doSomething(1)">suggestion1</li> 
     <li onClick="doSomething(2)">suggestion2</li> 
     </ul> 
    </div> 

Vous pouvez utiliser le onclick sur l'élément du corps, puis vérifier l'affichage de la suggestion pour le traitement approprié.

$('body').click(function(e){ 
    if($('.suggestions_box>ul').is(':visible')) $('.suggestions_box>ul').hide(); 
}) 

J'ai un exemple pour vous de se référer ici (doc truyen) espérons que cela vous aidera