[AJAX] Div résultat auto complétion ne fonctionne pas
Bonjour, actuellement je suis en train de mettre en place un système d’auto-completion avec base de donné.
Le problème c'est que lorsque je tape 2 lettre j'ai aucun résultat dans la div résult. Si je tape un nom complet il fera bien
index.php?page=ResultSearchMembre
qui me donnera le bon résultat.
En utilisant fierebug on me donne une erreur :
TypeError: searchElement is null pour cette ligne la
previousValue = searchElement.value;
Je ne vois pas d’où peut venir le problème. Pourriez-vous m'aider svp?
A mon avis du fait que la variable soit null , il n'ouvre pas le fichier search.php
voici mon code autocompletion.js
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
| (function() {
var searchElement = document.getElementById('search'),
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', '../modeles/search.php?s='+ 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
for (var i = 0, div ; i < responseLen ; i++) {
div = results.appendChild(document.createElement('div'));
div.innerHTML = response[i];
div.onclick = function() {
chooseResult(this);
};
}
}
}
function chooseResult(result) { // Choisit 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 clic, 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
}
};
})(); |
Mon formulaire d'autocompletion:
Code:
1
2
3
4
5
| echo"<form id='AutoCompletion' action='index.php?page=ResultSearchMembre' method='POST' enctype='multipart/Form-data' >
<input id='search' name='Tbsearch' type='text' autocomplete='off' />
<input class='rechercheM' type='submit' value='Rechercher' />
<div id='results'></div>
</form>"; |
Ainsi que me fichier search.php:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?php
include ('connexion.php');
function recherche(){
$recherche = array();
$query="SELECT Nom FROM liste_des_membres Where Nom like '".$_GET['s']."%'";
$result=mysql_query($query,dbconnect()) or die('Erreur SQL !<br />'.$query.'<br />'.mysql_error()); ;
$nb=0;
while($row=mysql_fetch_array($result, MYSQL_NUM)) {
$recherche[] = $row;
}
return $recherche;
}
echo $query;
header("Content-type: text/javascript");
echo implode('|', $recherche); // Et on affiche les résultats séparés par une barre verticale |
?> |
