[AJAX] Autocomplétation Ajax mysql
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:
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:
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é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;
}
?> |
