 |
|
|
| |
| TUTORIEL CLIENTS WEB |
|
|
|
| Un moteur de recherche dynamique avec HTTP Request |
| Mise en place d'un moteur de recherche proche de Google Suggest, affichant les résultats possibles alors même que l'utilisateur tape ses mots-clefs.
(16/05/2005) |
  |
La méthode d'accès serveur
transparent HTTP Request, qui combine la simplicité du JavaScript
aux possibilités d'un script serveur au sein d'une seule page,
gagne en popularité. Nous avions déjà abordé les principes d'utilisation
de l'objet XMLHTTP de JavaScript, et l'avions illustré d'un
exemple fonctionnel (lire notre
article du 06/04/2005). Nous allons ici étendre notre
compréhension de cet objet, en ajoutant à un champ de moteur
de recherche la possibilité, avant d'envoyer une requête vers
le serveur, de proposer à l'utilisateur des liens vers les pages
contenant le mot (ou même une partie du mot) qu'il est en train
de taper.
La base de la mise en place de XMLHTTP ayant déjà été expliquée
dans notre article précédent, nous allons donc pour cet article
utiliser l'approche du script LiveSearch
créé par BitFlux.
Ce script enrobe le code de base que nous connaissons déjà de
nombreux tests, que nous expliquerons. Commençons par
créer la page HTML d'où partiront les requêtes.
Le code HTML
Pour une utilisation de base, le code nécessaire est extrêmement
simple. En pratique, cela permet d'intégrer très facilement
le script à une interface Web déjà existante.
<head>
<title>Mes posts</title>
<script src="livesearch.js"></script>
</head>
<body onload="liveSearchInit()">
<form name="searchform">
Recherche rapide :
<input type="text" id="livesearch", name="q"
onkeypress="liveSearchStart();" />
</form>
<div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
</body>
</html>
Par comparaison
avec le code HTML de notre article précédent, il est même largement
simplifié, car l'ensemble des appels JavaScript est maintenant
regroupé dans un fichier externe, tandis que le formulaire ne
contient plus qu'un seul champ. Dernier élément, le div LSResult
contiendra les informations à afficher.
Le code PHP
Manque l'accès serveur : nous allons créer le fichier PHP qui
nous permettra d'accéder à la base des articles stockés. Celui-ci,
par défaut, doit être nommé livesearch.php
et être placé à la racine du compte. Cela étant, il est tout
à fait possible de personnaliser cela en modifier la ligne 134
de livesearch.js :
liveSearchReq.open("GET", liveSearchRoot
+ "/livesearch.php?q="
+ document.forms.searchform.q.value + liveSearchParams);
Voici le fichier au complet :
<?php
$recherche = $_GET['q'];
$db = mysql_pconnect('localhost', 'root', '');
mysql_select_db('wordpress');
$req = "SELECT id, post_title, post_content FROM wp_posts WHERE
post_content LIKE '%$recherche%' OR post_title LIKE
'%$recherche%';";
$res = mysql_query($req);
if ($res) {
while ($row = mysql_fetch_row($res)) {
echo "<a href='/?p=$row[0]'>$row[1]</a><br
/>";
}
}
?>
A la différence de l'exemple de notre article précédent, où
l'on n'attendait qu'une réponse à la requête, nous adaptons
ici le code en ajoutant une boucle while(),
permettant de parcourir les résultats et de les renvoyer un
a un, mis en page dans un lien HTML. Au final, en combinant
ces fichiers, nous obtenons l'affichage des titres d'articles
potentiellement cherchés, cliquables et placés juste sous le
formulaire. Étant donné que tout ceci est placé dans des balises
div, une CSS permet de remettre
en question tout l'affichage.
Au coeur du script
Plongeons maintenant dans le script LiveSearch
lui-même. En comparaison au script de base que nous avions présenté,
celui-ci lance de nombreux tests afin de s'assurer que son comportement
soit le même sous différentes configurations. Tout n'est donc
pas nécessaire pour un cas donné, mais permet d'assurer une
certaine portabilité et pérennité à la chose. Voici les principales
fonctions développées.
La fonction liveSearchInit(),
tout d'abord, activée dès que la page HTML a terminé de se charger
(via l'attribut onload de la
balise body), prend en compte
Safari, Gecko (Mozilla) et IE pour ajouter un gestionnaire d'évènement
dédié au champ du formulaire, afin de lancer une recherche dès
qu'un nouveau caractère est entré (via l'évènement keydown),
et cacher les résultats dès que le focus n'est plus sur le champ
(via blur). Par ailleurs, il
annule l'autocomplétion du champ, afin de ne pas gêner l'affichage
des résultats.
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
liveSearchKeyPress(event), ensuite,
n'est pas utilisée dans notre exemple, met permet de se servir
des touches du clavier (haut et bas) pour sélectionner un résultat.
La touche Escape, de son côté, cache les résultats.
liveSearchDoSearch() est le
coeur de la gestion de XMLHTTP.
C'est ici que le script prend en compte les diverses données
qui ont été créées par l'utilisateur, et les envoi finalement
au serveur, avec la méthode send().
De la même manière que dans l'exemple de notre premier article,
cette fonction fait appel à une autre, liveSearchProcessReqChange(),
pour vérifier l'état du canal ouvert entre la page et le serveur.
|
|
|
|
|
|
|
|
| Quand achetez-vous le plus en ligne ? |
|
|
|
|
|
|
|
|
| |
|
