[AJAX] Recherche inspiré de Google suggest sur bdd MySQL

Bonjour,

Voila, je viens vers vous car je suis bloqué dans le développement de mon projet.

En gros, j'ai mis en place une bdd avec une table stagiaires, contenant des informations sur ces derniers.

Sur une page PHP j'affiche toutes les infos contenues dans cette table. Cette table est amené a contenir beaucoup de stagiaires,
donc j'aimerai faire une fonction de recherche un peu comme google suggest.

Je souhaiterai qu'à partir d'un <input text> en fonction des lettres que je tape sa affiche les stagiaires et leur informations dont le Nom commence
par les lettres tapées.

Par exemple si je tape DU sa m'affiche DUPONT + ses infos, DURAND + ses infos ... sachant qu'il peut y avoir plusieurs DURAND ou DUPONT.

Pour effectuer cela j'ai chercher sur le net et je suis tomber sur des tutos AJAX/google suggest, mais je ne suis pas arrivé à le faire fonctionner.

Si quelqu'un pouvait m'éclairer sur la démarche à suivre se serait cool.

Sans code, point de salut...

Voici un tuto qui devrait te mettre sur la bonne voie ;)

Merci je vais me pencher sur ceci :ccool:

Après avoir utiliser le code source fournit dans le tuto ci dessus, j'ai voulu effectuer une amélioration.

En effet les suggestions proposer ne sont plus issue d'une liste mais d'un champ d'une bdd mysql.

Maintenant j'aimerai qu'en fonction de la valeur du champ présent dans la textbox, sa m'affiche en dessous dans un tableau toutes les infos en fonction de ce dernier.

J'ai pensé à attribuer une fonction js (function affichageDYnamique() qui se chargera d'effectuer des requetes SQL de selection sur la table de la base) sur l'évenement onchange de la textbox en question.

Je voulais savoir ce que vous en pensez ou sinon si vous aviez une meilleur solution.

autocomplete-3-2.html

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Test d'autocompletion</title>
        <link rel="stylesheet" type="text/css" href="autocompletion.css" />
        <script type="text/javascript" src="autocomplete-3-2.js"></script>
<script type="text/javascript">
window.onload = function(){initAutoComplete(document.getElementById('form-test'),
document.getElementById('champ-texte'),document.getElementById('bouton-submit'))};
 
function affichageDynamique()
{
	var Nom = document.getElementById('champ-texte').value;
 
	// CODE SOURCE POUR REQUETE SQL
}
</script>
    </head>
    <body>
        <form name="form-test" id="form-test" onchange="affichageDynamique();" action="javascript:alert('soumission de ' + document.getElementById('champ-texte').value)" style="margin-left: 50px; margin-top:20px">
            <input type="text" name="champ-texte" id="champ-texte" size="20" autocomplete="off" />
            <input type="submit" id="bouton-submit">
        </form>
    </body>
</html>

options.php

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
 
<?php
header('Content-Type: text/xml;charset=utf-8');
echo(utf8_encode("<?xml version='1.0' encoding='UTF-8' ?><options>"));
include 'connexion_mysql.php';
 
mysql_query("SET NAMES 'utf8'");
$query = "SELECT Distinct Nom FROM Stagiaires";
$result = mysql_query($query);
 
$queue = array();
 
while($tab= mysql_fetch_array($result,MYSQL_NUM)) array_unshift($queue, strtolower($tab[0]));
 
if (isset($_GET['debut'])) 
{
$debut = utf8_decode($_GET['debut']);
} else {
    $debut = "";
}
$debut = strtolower($debut);
 
function generateOptions($debut,$queue) 
{
    $MAX_RETURN = 10;
    $i = 0;
    foreach ($queue as $element) {
        if ($i<$MAX_RETURN && substr($element, 0, strlen($debut))==$debut) {
            echo(utf8_encode("<option>".$element."</option>"));
            $i++;
        }
    }
}
 
generateOptions($debut,$queue);
echo("</options>");
?>

Pour les 2 autres fichiers ils sont tels quels dans le tuto ci dessus et je n'y ai pas touché.