Discussion :

[gui80]

Bonjour à tous,

Voilà, j'affiche un tableau de personnes suivant le remplissage d'un champ texte dans lequel on commence à taper le nom d'une personne.
La requête AJAX est déclenché par un keyup sur ce champ texte.

Du coup, dès que je tape vite un nom, il a du mal à suivre.
Pour l'aider, j'aimerai ceci :
Je vais taper dupont.

Je commence à taper "d", il déclenche l'ajax.
2 issues ensuite :
- soit il est assez rapide et il affiche le résultat avant que je tape "u"
- soit il est trop lent, j'arrête la requête ajax (recherche de "d"), et je lui demande de chercher "du".

J'avais mis en variable globale, la variable contenant l'objet ajax, et si il n'était pas null, je me disais qu'il était donc occupé, et j'appelais sa méthode abort(), mais malheureusement, çà a l'air de se passer à un niveau encore plus bas.

Qu'en pensez-vous ?
Vers quoi je devrai regarder ?

Merci d'avance pour vos suggestions.

[emmanuel.remy]

Salut,

S'il n'est pas assez rapide pour chercher "d", il ne le sera certainement pas plus pour chercher "du"...
Déclencher la requête AJAX à chaque appui approché n'est effectivement pas recommandé, mais pourquoi ne pas déclencher ta requête AJAX quand aucune touche n'a été pressé pendant un certain délai, une demi-seconde par exemple ?

ERE

[gui80]

S'il n'est pas assez rapide pour chercher "d", il ne le sera certainement pas plus pour chercher "du"...

Oui, eh bien, évitons de lui faire chercher "d" si il est déjà à "du" non ?
Ca paraît un peu logique de vouloir lui épargner ce travail.

Déclencher la requête AJAX à chaque appui approché n'est effectivement pas recommandé, mais pourquoi ne pas déclencher ta requête AJAX quand aucune touche n'a été pressé pendant un certain délai, une demi-seconde par exemple ?

Il faudrait s'amuser avec une variable globale qui serait réinitialisé à chaque touche pressée ? et utiliser un setTimeLimit.

Euh, et çà, çà ne sollicite pas un peu trop les ressources client ?

[Bovino]

Une autre solution (bien qu'un setTimeout en soit une bonne) pourrait être de récupérer toutes les réponses correspondant à la première lettre, les stocker dans une variable et les filtrer à chaque ajout ou retrait de caractère.

[gui80]

Bonjour,

tu m'as piégé Bovino :-)

J'ai présenté cela en parlant que d'un seul champ, mais il y a 2 champs en réalité.
Je vais le montrer car on rentre plus profondément dans le problème.
Donc cf l'imprim écran fourni.

Désolé mais on aurait pu ne faire l'appel ajax qu'une fois pour rapatrier les données, et ne plus faire d'ajax après. Cà pourrait une façon de faire. Mais est-ce que cela serait adapté à mes 2 champs à présent. Il faudrait stocker les résultats (contient ET commence). Et réinitialiser ajax pour commence dès qu'il serait mis à "". Je ne parle même pas de contient :-)

Je montre le code js mais il est bon de savoir 2 choses :
- les 2 critères sont représentés par les id "condition" (commence ou contient) et "champ_recherche" (c'est le nom de l'agent)
- le code commenté représente la vision de départ que j'avais pour annuler une requête par cours par une nouvelle requête demandée (cf mon 1er post)

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
 
//var xhr = "libre";
 
window.onload = function() {
	document.getElementById('condition').onchange = recherche;
	document.getElementById('champ_recherche').onkeyup = recherche;
}
 
function getXMLHTTP(){
	var xhr = null;
	/*
	if(xhr != "libre") {
		alert('sature');
		xhr.abort();
	}
	*/
	if(window.XMLHttpRequest){ // Firefox et autres
		xhr = new XMLHttpRequest();
	}
	else if(window.ActiveXObject){ // Internet Explorer
		try {
			xhr = new ActiveXObject('Msxml2.XMLHTTP');
		}
		catch (e) {
			try {
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			catch (e1) {
				xhr = null;
			}
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur
		alert('Votre navigateur ne supporte pas les objets XMLHTTPRequest...');
	}
 
	return xhr;
}
 
function recherche() {
	var condition = document.getElementById('condition').value;
	var champ_recherche = document.getElementById('champ_recherche').value;
 
	var ajax = getXMLHTTP();
 
	ajax.open('POST', 'ajax/recherche_annuaire_nom.php',true);
	ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	ajax.send('condition=' + condition + '&champ_recherche=' + champ_recherche); //ajax.send(null);
	ajax.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(ajax.readyState == 4 && ajax.status == 200) {
			document.getElementById('resultat').innerHTML = ajax.responseText;
			//xhr = "libre";
		}
	}
}

J'espère ne pas vous avoir embrouiller :-)

[emmanuel.remy]

RE,

Il faudrait s'amuser avec une variable globale qui serait réinitialisé à chaque touche pressée ? et utiliser un setTimeLimit.

Euh, et çà, çà ne sollicite pas un peu trop les ressources client ?

Comme le dit Bovino tu aurais un seul timer en jeu et dès qu'une touche est pressée il te suffit de regarder si ce timer est actif et dans l'affirmative de l'annuler avec un clearTimeout. Ce n'est pas la mer à boire et question ressource cela ne va pas trop loin.

ERE

[gui80]

C'est noté mes chefs :-)

Voilà, j'ai fait une gestion de timer avec un délai de 200ms.
Çà me paraît être un délai raisonnable.
Dîtes toujours si j'ai oublié quelque chose.

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
 
//var xhr = "libre";
var timer = null;
 
 
window.onload = function() {
	document.getElementById('condition').onchange = recherche;
	document.getElementById('champ_recherche').onkeyup = gestionTimer;
}
 
function gestionTimer() {
	if(timer != null)
		clearTimeout(timer);
 
	timer = setTimeout("recherche()",200);
}

[emmanuel.remy]

Re,

J'ai testé vite fait en local par acquis de conscience et pour moi c'est tout bon !
Juste une note:

Code :

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

clearTimeout(timer);

ne remet pas timer à null, mais cela n'a pas d'impact car tu l'affectes dans la continuité.

ERE

[gui80]

Très bien, je n'avais pas regardé par curiosité quelle valeur était affecté à l'objet timer après l'appel de ClearTimeout();

Merci de m'avoir aiguillé vers une solution de rechange fonctionnelle, même si j'aurai bien aimé trouver l'arrêt d'un évènement Ajax.


A bientôt pour de nouveaux cas spécifiques ! :-)