Auto-compétition sur plusieurs champs
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:
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
