Bonjour,

J'ai mis en place sur mon site un système d'auto complétion que j'ai trouvé sur internet (je ne sais plus ou).
Il fonctionne très bien pour un champ.
Mais mon problème et que j'aimerais qu'il soit utilisable sur au moins 60 champs qui ont un id dynamique...
Je ne maîtrise pas du tout le javascript et je ne vois pas du tout comment faire...
Voici le code de mon autocomplete :

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
(function() {
 
	var searchElement = document.getElementById('clientDefaut'),
		results = document.getElementById('results'),
		selectedResult = -1, // Permet de savoir quel résultat est sélectionné : -1 signifie "aucune sélection"
		previousRequest, // On stocke notre précédente requête dans cette variable
		previousValue = searchElement.value; // On fait de même avec la précédente valeur
 
 
 
	function getResults(keywords) { // Effectue une requête et récupère les résultats
 
		var xhr = new XMLHttpRequest();
		xhr.open('GET', './searchClientDefaut.php?q='+ encodeURIComponent(keywords));
 
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
 
				displayResults(xhr.responseText);
 
			}
		};
 
		xhr.send(null);
 
		return xhr;
 
	}
 
	function displayResults(response) { // Affiche les résultats d'une requête
 
		results.style.display = response.length ? 'block' : 'none'; // On cache le conteneur si on n'a pas de résultats
 
		if (response.length) { // On ne modifie les résultats que si on en a obtenu
 
			response = response.split('|');
			var responseLen = response.length;
 
			results.innerHTML = ''; // On vide les résultats
 
			var div = results.appendChild(document.createElement('datalist'));
			div.id = 'autocomplete';
 
			for (var i = 0 ; i < responseLen ; i++) {
 
				var option = div.appendChild(document.createElement('option'));
				option.value = response[i];
				var newText = document.createTextNode(response[i]);
				option.appendChild(newText);
 
			}
 
		}
 
	}
 
	function chooseResult(result) { // Choisi un des résultats d'une requête et gère tout ce qui y est attaché
 
		searchElement.value = previousValue = result.innerHTML; // On change le contenu du champ de recherche et on enregistre en tant que précédente valeur
		results.style.display = 'none'; // On cache les résultats
		result.className = ''; // On supprime l'effet de focus
		selectedResult = -1; // On remet la sélection à "zéro"
		searchElement.focus(); // Si le résultat a été choisi par le biais d'un clique alors le focus est perdu, donc on le réattribue
 
	}
 
 
 
	searchElement.onkeyup = function(e) {
 
		e = e || window.event; // On n'oublie pas la compatibilité pour IE
 
		var divs = results.getElementsByTagName('div');
 
		if (e.keyCode == 38 && selectedResult > -1) { // Si la touche pressée est la flèche "haut"
 
			divs[selectedResult--].className = '';
 
			if (selectedResult > -1) { // Cette condition évite une modification de childNodes[-1], qui n'existe pas, bien entendu
				divs[selectedResult].className = 'result_focus';
			}
 
		}
 
		else if (e.keyCode == 40 && selectedResult < divs.length - 1) { // Si la touche pressée est la flèche "bas"
 
			results.style.display = 'block'; // On affiche les résultats
 
			if (selectedResult > -1) { // Cette condition évite une modification de childNodes[-1], qui n'existe pas, bien entendu
				divs[selectedResult].className = '';
			}
 
			divs[++selectedResult].className = 'result_focus';
 
		}
 
		else if (e.keyCode == 13 && selectedResult > -1) { // Si la touche pressée est "Entrée"
 
			chooseResult(divs[selectedResult]);
 
		}
 
		else if (searchElement.value != previousValue) { // Si le contenu du champ de recherche a changé
 
			previousValue = searchElement.value;
 
			if (previousRequest && previousRequest.readyState < 4) {
				previousRequest.abort(); // Si on a toujours une requête en cours, on l'arrête
			}
 
			previousRequest = getResults(previousValue); // On stocke la nouvelle requête
 
			selectedResult = -1; // On remet la sélection à "zéro" à chaque caractère écrit
 
		}
 
	};
 
})();
J'aimerais que ma variable "searchElement" soit dynamique en fonction du champs de texte sélectionné...
Est-ce possible ?
Merci d'avance