Discussion :

[franco14]

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

[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

[franco14]

Voici le code:

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
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.

[gwyohm]

Pourquoi 19 ?
Que fait la fonction Key ?

[franco14]

Code :

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

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.

[gwyohm]

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 :

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

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()" />

[franco14]

Merci