Discussion :

[laxe13]

bonjour, je me suis fais un script d'autocompletition maison mais j'ai un probleme. Le div d'autocompletition reste affiché en permanence à moins ce qu'on clique dessus ( au onclick je met un visibility hidden sur mon div). Je voudrais mettre un visibility:hidden quand l'utilisateur clique n'importe ou dans la page hormis le div. Si quelqu'un aurait une idée pour maiguillé.

[Jumano]

Bonjour,
Il serait bon que tu nous montres un peu ton code ... c'est plus facile pour voir certaines erreurs ...

[Cornholio]

Tu peux utiliser l'événement "onmouseout" pour cacher le div quand on sort le curseur.

[laxe13]

alors l'autocomplete se trouve ici : http://www.kalikoprint.com/ (en dessous de la barre bleu) et il y a uniquement des mots en P pour le moment.

En fait ce que je voudrais c if(div == visible and clique souris == hors du div) {set visible = hidden; }

Mon html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<form name="proute" id="proute" action="" method="get">
Saisissez un pays : 
        <div><input type="text" id="pays_user" name="pays_user" onkeyup="document.getElementById('autocomplete_pays').style.visibility='visible';javascript:Refresh(this.value, 'autocomplete', 'autocomplete_pays');" class="inputtext" autocomplete="off" /></div>
	<div id="autocomplete_pays" class="autocomplete" style="display:hidden;" ></div><br /> <br />
</div>
</form>

Le php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
require_once('../_includes/connect.inc.php');
if(strlen($varp) > '0') {
	$varp = ucfirst($varp);
	$_cmd_sel_complete = mysql_query("SELECT * FROM departement WHERE nom LIKE '$varp%'");
	// on compte les resultats
	$_nb_rows = mysql_num_rows($_cmd_sel_complete);
	if($_nb_rows > '0') {
		// si ya qu'un resultat on verifi si c'est le même
		if($_nb_rows == '1') {
			$info_complete = mysql_fetch_array($_cmd_sel_complete);
			if($info_complete['nom'] != $varp) { ?>
				<div class="autocomplete_item" onclick="javascript:document.forms.proute.pays_user.value='<? echo $info_complete['nom']; ?>';document.getElementById('autocomplete_pays').style.visibility='hidden';"><? echo $info_complete['nom']; ?></div><?php                           
                        }
                }
                else {
                        // on while les resultats
                        while($info_complete = mysql_fetch_array($_cmd_sel_complete)) { ?>
				<div class="autocomplete_item" onclick="javascript:document.forms.proute.pays_user.value='<? echo $info_complete['nom']; ?>';document.getElementById('autocomplete_pays').style.visibility='hidden';"><? echo $info_complete['nom']; ?></div><?php
                        }
                }
        }
}
?>

Le js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function Refresh(variable, page, dive)
	{ 
		this.variable = variable;
		this.page = page;
		this.dive = dive;
		var req = null; 
 
		if (window.XMLHttpRequest)
		{
 			req = new XMLHttpRequest();
			if (req.overrideMimeType) 
			{
				req.overrideMimeType('text/xml');
			}
		} 
		else if (window.ActiveXObject) 
		{
			try {
				req = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)
			{
				try {
					req = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
	        	}
 
		req.onreadystatechange = function()
		{ 
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.getElementById(dive).innerHTML  = "" + req.responseText;	
				}	
				else	
				{
					document.getElementById(dive).innerHTML="Error: returned status code " + req.status + " " + req.statusText;
				}	
			}
		}; 
        req.open("POST", "./_content/_ajax/"+this.page+".php", true); 
		req.setRequestHeader('Content-Type','application/x-www-form-urlencoded; Charset=iso-8859-1');
		req.send("varp="+this.variable);		}

merci

[laxe13]

[Jumano]

Bonjour,
Tu peux essayer de faire comme ceci :
1. Tu créés un nouvelle "class" par exemple "div_vide",

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<style>
.div_vide {
	height:0px;
	width:0px;
}
</style>

2. Tu attribue cette nouvelle "class" à ta "div" ayant l'id "autocomplete_pays", et sur le "onkeyup" tu modifies la "class" de cette même "div" par "autocomplete",

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form name="proute" id="proute" action="" method="get">
Saisissez un pays : 
<div><input type="text" id="pays_user" name="pays_user" onkeyup="document.getElementById('autocomplete_pays').className='autocomplete'; Refresh(this.value,'autocomplete','autocomplete_pays');"  class="inputtext" autocomplete="off"/></div>
<div id="autocomplete_pays" class="div_vide"></div>
</form>

3 . En fin dans ta page "autocomplete.php" tu modifies ton code comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="autocomplete_item" onclick="document.getElementById('pays_user').value='<?php echo $info_complete['nom']; ?>';  document.getElementById('autocomplete_pays').className='div_vide'; document.getElementById('autocomplete_pays').innerHTML='';"><?php echo $info_complete['nom']; ?></div>

Tu redonnes la "class" "div_vide" et tu vides la "div" ...

[laxe13]

j'ai trouvé une autre solution. Dans le onclick du body je met le div en hidden ! je vais essayer ton truc pour voir. merci encore