Fermer un div quand je clique dans le vide JS [Résolu]

[kabybot]

Bonjour,
dans le cadre d'un moteur de recherche style facebook en ajax je rencontre un problème , une fois le mot clé est tapé les résultats sont bien la , mon div s'affiche , mais quand je clique dans le vide il reste toujours visible.
j'ai pu régler la moitié du problème en rajoutant cette condition pour le fermer si le champ est vide .

Code :

1
2
3
4
5
6
7
8
... 
if(searchbox=='') 
{ 
document.getElementById('display').style.display='none'; 
} 
else 
{ 
...

et cela fonction. maintenant je veux fermer le div "display" quand je clique dans le vide (ailleurs sur l'écran) tout le problème est la je ne sais pas quoi mettre comme condition .
merci d'avance

[SpaceFrog]

cliquer ailleurs => cliquer sur le body ...

[kabybot]

bonjour spacefrog oui c'est ce que je voulais dire : n'importe ou ailleurs dans le body l'essentiel c'est qu'il se ferme dé qu'on fait un clique même dans le vide , voila j'espère que je me suis bien expliquer

[Willpower]

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.body.onclick = function(e){
  var evt = window.event || e; 
  var target = evt.target || evt.srcElement; 
  var prevent = false;
  while( target && !prevent ){
    // id des éléments qui ne déclenche pas la fermeture
    if( target.id == "id_de_mon_input" || target.id == "id_de_mes_resultats" )
      prevent = true;
    target = target.parentNode;
  }
  // si le clique n'était pas sur un élémént de la recherhe, on cache l'élément
  if( !prevent ){
    document.getElementById('display').style.display='none';
  }
  // ne stop pas la propagation
  return true;
}

[kabybot]

bonsoir willpower merci d'avoir répondu, je vien de rajouter le code mais ça ne fonction toujours pas enfin il se ferme toujour pas voici mon code complet

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<script type="text/javascript">
$(document).ready(function(){
$(".search").keyup(function() 
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{
document.getElementById('display').style.display='none';
}
else
{
$.ajax({
type: "POST",
url: "search_f_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();	
	}
});
}return false;    
});
});
 
window.body.onclick = function(e){
  var evt = window.event || e; 
  var target = evt.target || evt.srcElement; 
  var prevent = false;
  while( target && !prevent ){
    // id des éléments qui ne déclenche pas la fermeture
    if( target.id == "searchbox" || target.id == "display_box" )
      prevent = true;
    target = target.parentNode;
  }
  // si le clique n'était pas sur un élémént de la recherhe, on cache l'élément
  if( !prevent ){
    document.getElementById('display').style.display='none';
  }
  // ne stop pas la propagation
  return true;
}
</script>	
<!--//search-->

//formulaire Html

Code :

1
2
3
4
5
6
7
8
9
10
11
<form action="../search_results.php" method="_POST">
<input type="text" name="name_key" class="search no_abk" id="searchbox" />
<input class="button_search" name="btnG" type="submit"  alt="{l_search}"  value="" />
</form>
 
//block des resultat en display:none
<div id="display">
<div class="display_box" align="left"> item resultat1</div>
<div class="display_box" align="left"> item resultat2</div>
...
</div>

je veux juste fermer le div#display quand je clique dans le vide

merci d'avance

[Willpower]

autant pour moi, "window.body" n'existe pas, tu dois remplacer par "document.body.onclick".


sinon vu que tu utilises déjà jQuery, voici la version jQuery :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).click(function(evt){
 
	var target = evt.target, prevent = false;
 
	while( target && !prevent ){
		// id des éléments qui ne déclenche pas la fermeture
		if( target.id == "searchbox" || target.id == "display" )
			prevent = true;
		target = target.parentNode;
	}
 
	// si le clique n'était pas sur un élémént de la recherhe, on cache l'élément
	if( !prevent ){
		document.getElementById('display').style.display='none';
	}
 
	// ne stop pas la propagation
	return true;
});

[kabybot]

Merci Willpower tout est rentrer dans l'ordre ,cela fonction très bien merci encore

[kabybot]

je reviens ver vous car mon problème est résolut mais une autre question se pose :
cette fois quand je clique dans le vide l'input reste plein , je m'explique
dans l'input je tapé par exemple : Bernard
puis je change d'avi je clique donc ailleur dans le body , actuellement le '' Bernard est toujours conservé dans l'input ,
en gros j'aimerai vidé le champ (input) ou même temps cacher le display cité en haut
merci d'avance

[Willpower]

dans le block possèdant la condition "if( !prevent )"

tu rajoutes :

$('#searchbox').val('');

[kabybot]

Mille fois merci Willpower
problème résolu