Autocompletion en onFocus

Version imprimable

22/02/2010, 15h04
franco14

Autocompletion en onFocus

Bonjour,

Je débute en stage, et il m'est demandé d'effectuer une autocomplétion, celle existante nécessitait d'appuyer sur entrée pour avoir la liste. Mais suite au rajout d'un bouton cela n'est plus possible. donc j'aurais aimé faire une autocompletion du genre onFocus mais je ne maitrise pas Java-script. Pourriez vous m'aider?

Cordialement:D
22/02/2010, 15h13
gwyohm

Bonjour et bienvenue sur le forum,
ce n'est pas tellement sur le onfocus qu'il faut intervenir mais plus sur l'evenement keyup.
Montre nous le code existant

Voici le code:

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
$return .="	<tr><td style='text-align:left;'>Responsable du dossier : </td><td><input   type='text' id='numcollaborateur' name='numcollaborateur' value='' onchange=\"Modif();document.getElementById('numcollaborateur').value='';nouvresp=true;\" style='position:relative;width:200px;' id='Collaborateur' onfocus=\"Selectionner(this.id);DemandeSudjest(this.id);\" onblur=\"deSelectionner();FermerSudjest();\" onKeyPress=\"Modif();if(Key(event))Sudjest(this.id,'99','php/Ajax/Sudjest.php',event)\" />&nbsp;<a id='info'>*</a></td></tr><tr>";
 
function Sudjest(Id,type,urlTrt,eve,idparent)
{
	Sudjeter = true;
	MonId = Id;
 
	var chars = document.getElementById(Id).value;
 
	if(chars == "+")
		chars = "*";
 
	if(eve || Key(eve))
	{
 
 
 
		var Top = parseInt(document.getElementById(Id).offsetTop);
 
		var width = document.getElementById(Id).style.width;
 
 
		var topParent = 0;
		var LeftParent = 0;
 
		if(idparent != undefined && idparent != null)
		{
			topParent = document.getElementById(idparent).offsetTop;
			LeftParent = document.getElementById(idparent).offsetLeft;
		} 
 
		var Length = width.length;
 
		width = width.substring(0,Length - 2);
		width = parseInt(width) + 10 ;
 
 
		var Left = parseInt(document.getElementById(Id).offsetLeft + width +LeftParent);
 
		Top += topParent;
 
		var htmlRequest = ajaxFunction();
		if (htmlRequest==null){ // If it cannot create a new Xmlhttp object.
			alert ("Browser does not support HTTP Request");
			return;
		} 
 
		htmlRequest.onreadystatechange = function(){
			if(htmlRequest.readyState == 4){
 
				document.getElementById('sudjest').style.background = '#FFFFFF';	
 
				document.getElementById('sudjest').style.zIndex = '1';
 
				if(htmlRequest.responseText != "RIEN")
				{	
					document.getElementById('sudjest').innerHTML='';
					document.getElementById('sudjest').innerHTML = htmlRequest.responseText;
 
				}
				else
				{
					document.getElementById('sudjest').innerHTML=' Pas de correspondance !';
					window.setTimeout("CloseBox('sudjest')",2000);
				}
 
 
 
			}
 
			if(htmlRequest.readyState == 1){
				document.getElementById('sudjest').style.top = Top+"px";
				document.getElementById('sudjest').style.left = Left+"px";
				document.getElementById('sudjest').style.minHeight = "30px";
				document.getElementById('sudjest').style.background = 'url(images/load.gif) no-repeat';
				document.getElementById('sudjest').style.display = 'block';
			}
 
		}
 
		htmlRequest.open("GET", urlTrt+"?type="+type+"&chars="+chars, true);
		htmlRequest.send("");
	}
	else
	{
		document.getElementById('sudjest').style.display = 'none';
		document.getElementById('sudjest').innerHTML='';
	}
}

J'ai bien essayé de changer la valeur du key(eve) de 13 à 19. cela "fonctionne", mais il m'affiche seulement mes saisies précédentes tandis que lorsque j'appuyais sur entrée j'avais tout les responsables présent dans ma base.

22/02/2010, 16h18
gwyohm

Pourquoi 19 ?
Que fait la fonction Key ?
22/02/2010, 16h33
franco14
Code:

1 2 3 4 5 6 7 8 function Key(eve) { key = eve.keyCode; if(key == 13) return true; } var MonId; //Pour le click dans le sudjest
je croyais que c'était la valeur de la touche qui activait mon autocompletion (qui n'en ai pas une visiblement) en fait quand je suis dans mon champ j'appuie sur entrée et j'ai la liste de mes responsable de la base qui apparaissent.

OK, pour info la touche 19 est Pause Attn (je l'ai cherchée un moment).

Dans ton cas, tu veux systématiquement lancer la requete admettons quand il y a moins de 1 seconde depuis la derniere touche relevée... essaye comme ca :
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> var runner; function checkAndRun(field) { window.clearTimeout(runner); runner = window.setTimeout(function(){Sudjest(field.id,'99','php/Ajax/Sudjest.php',true)},1000); } </script> <input type='text' id='numcollaborateur' name='numcollaborateur' value='' style='position:relative;width:200px;' id='Collaborateur' onkeyup="checkAndRun()" />

23/02/2010, 10h34
franco14

Merci :D