[AJAX] Autocomplétation Ajax mysql

**fazpedro** · 13/07/2011, 15h29

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;
}
?>

**fazpedro** · 26/07/2011, 23h19

j'ai enfin trouvé la solution !

j'ai récupéré le code suivant disponible sur le net
jquery-1.2.1.pack.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
/* jQuery 1.2.1 - New Wave Javascript
 * Copyright (c) 2007 John Resig (jquery.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 * $Date: 2007-09-16 23:42:06 -0400 (Sun, 16 Sep 2007) $
 * $Rev: 3353 $
 */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String))..............

ma page HTML :

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
<!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-1.2.1.pack.js"></script>
<script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) { // si le champs txte est vide
			$('#suggestions').hide(); // on cache les suggestions
		} else { // sinon
			$.post("ajax.php", {queryString: ""+inputString+""}, function(data){ 
			// on envoie la valeur du champ texte dans la variable post queryString au fichier ajax.php
				if(data.length >0) {
					$('#suggestions').show(); // si il y a un retour, on affiche la liste
					$('#autoSuggestionsList').html(data); // et on remplit la liste des données
				}
			});
		}
	}
	function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
	$(document).ready( function () {
		$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
			lookup($(this).val()) 
		});
		$("input#inputString").blur( function() { // si le champ texte perd le focus
			fill() 
		});
	});
</script>
</head>
<body>
<div id="maincontent">
<form>
<fieldset>
<legend> &nbsp; Rechercher un lieu :&nbsp; </legend>
<br />
<label>Lieu &agrave; chercher : </label>
<br />
<input type="text" class="ev" value="" id="inputString" /><!--  champ texte à analyser pour les suggestions -->
<div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
</div>
</div>
</fieldset>
</form>
<br />
<br />
</div>
</body>
</html>

le fichier qui traite les infos => ajax.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
<?php
require("configuration.php");
$sql = connect_sql();
mysql_query("SET NAMES utf8");
// si une variable queryString a été posté
if(isset($_POST['queryString'])) 
{
// si la longueur du contenu de la variable est superieur à 0
	$queryString = ($_POST['queryString']);
	if(strlen($queryString) >0) {
		// requete sql à personnaliser pour correspondre à votre base de données
			// $result = mysql_query("SELECT nom, ville FROM lieu WHERE nom LIKE '$queryString%' LIMIT 15");
			$result = mysql_query("SELECT * FROM lieu WHERE nom LIKE '$queryString%' LIMIT 15");
			// UNION SELECT ville FROM lieu WHERE nom LIKE '$queryString%'");
			if($result) 
			{	// on parcourt les resultats
				while($nom = mysql_fetch_array($result)) {
				// on affiche les resultats dans un element de liste en ajoutant la fonction fill sur l'evenenement onClick
		        echo '<li onClick="fill(\''.$nom["nom"].'\');">'.$nom["nom"].'</li>';
				// affichage de la ville en plus
				echo '<span style="color:#8E236B;">';
				echo 'Secteur : ';
				echo '<b>'.$nom["ville"].'</b>';
				echo '</span>';
				}
			} else 	{
				echo 'Il y a un probleme avec la requete sql.';		}
		}
			else 			{
			echo 'Il y a un probleme avec la requete sql.';	} 
}
		else {
			echo 'Il ne devrait pas avoir un accès direct à ce script !!!';	}
?>

pour info, le style CSS concerné :

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
a.lien {
color:#2193BD;
font-weight:bold;
font-size:1.2em;
text-decoration:underline;}
a.lien:hover {
color:#333;}
hr{
	clear: both;
	display: block;
	visibility: hidden;
	height: 1px;}
/****	STYLES DE LA BOITE DE SUGGESTION ****/
.suggestionsBox {
	position: absolute;
	left: 30px;
	margin: 10px 0px 0px 0px;
	width: 200px;
	background-color: #212427;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border: 2px solid #000;	
	color: #fff;	}
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	.suggestionList li {
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
		list-style:none;
	}
	.suggestionList li:hover {
		background-color: #ffa800;
		color:#000;
	}

[AJAX] Autocomplétation Ajax mysql

AJAX

Vue hybride

Discussions similaires

Partager

Partager