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 : 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
(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 php : Sélectionner tout - Visualiser dans une fenêtre à part
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 php : 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
<?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 |
    ?>