Bienvenue sur le blog d'un développeur web : Actualités du monde informatique et scientifique, morceaux de programmations et diverses informations intéréssantes.

Recherche à la volée avec Jquery

Posté par : Neg le : 2009-12-09 10:00:31



Wesh wesh yo ! tu sait qu'est-ce-qu'on va faire aujourd'hui ? on va apprendre à coder vite fait un moteur de recherche avec résultats instantanés (en même temps que toi tu frappe ton clavier !).

Pour ça, comme d'habitude (big up à cloclo) on va utiliser la librairie jQuery.

Voyons plus précisément ce qu'on va mettre en place :
- un champ de recherche,
- un div pour afficher les résultats au fur et à mesure (à chaque relâchement de touche)
- une recherche séparant les mots que l'on tape, pour que les résultats s'affichent même si les mots données ne se suivent pas.
- Pour l'exemple la recherche s'effectuera sur le champ titre des articles de ce blog
- DEMO ICI (essaye avec "jQuery" par exemple)

On commence par la structure html de la page, trés simple :
<body>
Recherchez dans les titres : <input type="text" id="recherche"> <a href="">revenir à l'article</a>
<div id="suggest">
</div>
</body>


regardons maintenant le "head" de la page, avec notre code javascript :
on appelle jquery
<script type="text/javascript" src="./jquery.js"> </script>
le code jquery
<script type="text/javascript">
$(document).ready(function() {
//à la modification du champs recherche
$("#recherche").keyup(function(){
var req=$(this).attr("value");
//requête ajax, appel du fichier recherche_ajax.php
$.ajax({
type: "GET",
url: "./recherche_ajax.php?req="+req,
dataType : "html",
//affichage de l'erreur en cas de problème
error:function(msg, string){
alert( "Error !: " + string );
},
success:function(data){
//alert(data);
on met à jour le div suggest avec les données reçus
$("#suggest").empty();
$("#suggest").append(data);
}});
});
})
</script>


il nous manque encore le code php contenant la requête sql du fichier recherche_ajax.php appelé par le code javascript. le voici :
//on se connecte à notre base de données
require_once('./connect_bdd.php');
//nom de la table sur laquelle on recherche
$nom_table='article';
//nom du champs sur lequel on effectue la recherche
$nom_champ='article_titre';
//suppression des espaces inutiles
$chaine=trim($_GET["req"]);
//si la recherche n'est pas vide
if($chaine!='')
{
//on sépare les mots
$chaine=explode(' ', $chaine);
$nb=count($chaine);
//si il y'a plusieur mots
$req_sup='';
if($nb>1)
{
//pour chaque mot sauf le premier
for($i=1;$i<$nb;$i++)
{
$chaine[$i]=trim($chaine[$i]);
//si la chaine n'est pas vide
if($chaine[$i]!='')
{
on forme la requête
$req_sup.=" AND (".$nom_champ." LIKE '%".$chaine[$i]."%') ";
}
}
}
//on fait la recherche, qui prend par defaut le premier mot, + les autre qu'on vient de traiter
$query ="
SELECT article_id, article_titre FROM ".$nom_table."
WHERE (".$nom_champ." LIKE '%".$chaine[0]."%')
".$req_sup."
ORDER BY ".$nom_champ." LIMIT 20";
$rs = mysql_query($query);
//pour chaque résultat
while(list($id, $titre)=mysql_fetch_row($rs))
{
//on renvoit le lien
echo '<a href="../chezneg-leblog.php?id_art='.$id.'">'.$titre.'</a><br />';
}
}
else
{
//on renvois du vide
echo '';
}


ce sera tout les boloss :)

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=220&titre=Recherche-à-la-volée-avec-Jquery
tags : Informatique (68), php (21), jQuery (12), javascript (9), SQL (5),


J'aime, 17 personnes aiment çaCommentaire(s)(3)

1) Hayreon le : 2011-11-10 18:16:22

Super tuto, merci !

2) bast le : 2012-05-01 16:32:32

merci !

3) Noum77 le : 2013-02-27 17:22:32 http://nomentsoa.0fees.net/

Yo yo! Ca c'est un site pour les developpeurs cool. Merci pour le tuto. Yosh!


Ajouter un commentaire :






Les derniers articles :
Ouverture du site profitvacances.com
Utiliser la géolocalisation et styler une carte google map
Faire un slider simplement avec jQuery
Système de pagination en PHP sur une requête Mysql
Trouver les éléments à proximité sous MySql via leurs longitude et latitude
Stockage de données dans le cloud (SugarSync, DropBox, SkyDrive, BitCasa)
PHP : Recuperer les balises images d'un document (une page) HTML
PHP : faire un lecteur RSS grâce à simplexml_load_file
Regarder la TV devant Internet (et inversement)
Albert Dupontel et Benoit Poelvoorde en punks pour le film "le grand soir"

propulsé par Neg