Bonjour,

j'ai vu un tutoriel sur le net pour créér une recherche en autocomplétation mais je n'arrive pas à la faire fonctionner...
avez-vous une idée (simple si possible...) merci d'avance.

formulaire_instantane.php :
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
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title>MON SITE</title>
<link rel="stylesheet" type="text/css" href="style.css" />
 
<script type="text/javascript" src="jquery.js">
$(document).ready( function() {
  // détection de la saisie dans le champ de recherche
  $('#q').keyup( function(){
    $field = $(this);
    $('#results').html(''); // on vide les resultats
    $('#ajax-loader').remove(); // on retire le loader
 
    // on commence à traiter à partir du 2ème caractère saisie
    if( $field.val().length > 1 )
    {
		// on envoie la valeur recherché en GET au fichier de traitement
		$.ajax({
		type : 'GET', // envoi des données en GET ou POST
		url : 'ajax-search.php' , // url du fichier de traitement
		data : 'q='+$(this).val() , // données à envoyer en  GET ou POST
		beforeSend : function() { // traitements JS à faire AVANT l'envoi
		$field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
		},
		success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
		$('#ajax-loader').remove(); // on enleve le loader
		$('#results').html(data); // affichage des résultats dans le bloc
	}
      });
    }		
  });
});
</script>
 
<!--fin du formulaire en ajax instantané -->
 
</head>
 
<body>
 
<?php include('bandeau.php'); ?> <!-- insère le bandeau principal en haut -->
 
<div id="mainContent">
 
<!--debut du formulaire en ajax instantané -->
<form class="ajax" action="search.php" method="get">
	<p>
		<label for="q">Rechercher un lieu</label>
		<input type="text" name="q" id="q" />
	</p>
</form>
<!--fin du formulaire-->
 
<!--preparation de l'affichage des resultats-->
<div id="results">
</div>
 
</div>
 
<?php include('bas_de_page.php'); ?> <!-- insère le bas de page  -->
 
</body>
 
</html>
ajax-search.php :
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
<?php
// connexion à la base
require("configuration.php");
$sql = connect_sql();
// on écrit la requête
mysql_query("SET NAMES utf8");
 //recherche des résultats dans la base de données
$select = "SELECT nom , secteur , ville FORM lieu WHERE nom LIKE \'' . safe( $_GET['q'] ) . '%\' LIMIT 0,20'";
$result = mysql_query($select) or die ('Erreur : '.mysql_error() );
 
// affichage d'un message "pas de résultats"
if( mysql_num_rows( $result ) == 0 )
{
?>
<h3 style="text-align:center; margin:10px 0;">Pas de r&eacute;sultats pour cette recherche</h3>
<?php
}
else
{
// parcours et affichage des résultats
    while( $post = mysql_fetch_object( $result ))
    {
    ?>
        <div class="article-result">
            <h3>
			<a href="<?php echo $post->ville; ?>">
			< ?php echo utf8_encode( $post->nom ); ?>
			</a>
			</h3>
            <p class="date"><?php echo $post->secteur; ?></p>
            <p class="url"><?php echo $post->ville; ?></p>
        </div>
    <?php
    }
}
 
/*****
fonctions
*****/
function safe($var)
{
        $var = mysql_real_escape_string($var);
        $var = addcslashes($var, '%_');
        $var = trim($var);
        $var = htmlspecialchars($var);
        return $var;
}
?>