LiveSearch est un script permettant la saisi semi-automatique. C'est a dire que lorsqu'un de vos visiteur tappe quelque chose dans un champs, au fure et a mesure qu'il tappe des propositions lui sont faites. Pour voir un exemple d'utilisation de LiveSearch : BIG-annuaire (le champs de recherche en haut a droite).

Difficulté d'installation

Ce script est tres simple à mettre en place mais demande quelques connaissances en PHP et SQL.
De plus, sachez que ce script conssomera beaucoup de temps machine, étant donnée qu'a chaque fois qu'une lettre est tappée dans le champs en question, une requete SQL est faite.

Compatibilité

MSIE >= 5.0 (only tested with 6.0, should work w/ 5.x, OK with 5.0 on Win98)
Mozilla/Firefox (Since at least Mozilla 1.0)
Safari >= 1.2

Installation

Tout d'abord, commencez par telecharger le fichier suivant : livesearch.js

Dans la page où se trouve le champs auquel vous souhaitez appliquer LiveSearch, ajouter ceci :

Entre <HEAD> et </HEAD> :
<script src="livesearch.js"></script>
Dans la balise <BODY> :
onload="liveSearchInit()"
Dans la balise <FORM> du formulaire dans lequel se trouve le champs :
name="searchform" onsubmit="return liveSearchSubmit()"
Dans la balise du champs (<INPUT TYPE="TEXT">) :
id="livesearch" onkeypress="liveSearchStart();"
A l'endroit ou vous voulez voir apparaitre les propositions :
<div id="LSResult" style="z-index: 5; position: absolute; right:20px; top:210px; display: none;"><div id="LSShadow"></div></div>

Choisissez la position de la "boite" avec right:20px; et top:210px;

Voila en gros le schéma de la page :

<HTML>

<HEAD>

</TITLE></TITLE>

<script src="livesearch.js"></script>
</HEAD>

<BODY onload="liveSearchInit()">

<FORM name="searchform" onsubmit="return liveSearchSubmit()">
<INPUT TYPE="TEXT" name="searchname" id="livesearch" onkeypress="liveSearchStart();">
</FORM>

<div id="LSResult" style="z-index: 5; position: absolute; right:20px; top:210px; display: none;"><div id="LSShadow"></div></div>

</BODY>

</HTML>

Il faut ensuite créer un fichier nommé livesearch.php dans lequel vous ferez l'extration en php des propositions.
Voici un exemple d'extraction :
(ici, le nom du champ dans lequel l'utilisateur tappe quelque chose s'appel searchname)

<?
// CONNEXION A LA BASE DE DONNEE:
$db_link = @mysql_connect($serveur,$user,$passwd);
if(!$db_link) {echo "Connexion impossible à la base de données <b>$sql_bdd</b> sur le serveur <b>$sql_server</b><br>Vérifiez les paramètres du fichier de configuration"; exit;}

//COMPTEUR POUR N'AFFICHER QU'UN CERTAIN NOMBRE DE PROPOSITIONS:
$compt=0;

//ON RECUPERE CE QUI EST ECRIT DANS LE CHAMPS:
$recherche = $_GET['searchname'];

//ON EXTRAIT DE LA BDD
$req=mysql_db_query($sql_bdd,"SELECT champ1 FROM table WHERE champ2 LIKE \"$recherche%\"",$db_link)
or die ("marche pas ici !");

//CI-DESSOUS, CE QUI SERA AFFICHE:
echo '<table border="1" width="180"  bordercolor="#CEE7EF" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF"><tr><td><font face="verdana" size="2">';

while ($ligne = mysql_fetch_array($req, MYSQL_ASSOC))
{panel}
     {$compt++;
{panel}
echo '<a href="'.$ligne['champ1'].'.php">'.$ligne['champs2']."</a><br>";

//LORSQU'ON A AFFICHE 15 PROPOSITIONS, ON S'ARRETE:
if ($compt==15){break;}
{panel}
     }
{panel}

echo '</font></td></tr></table>';
?>

Pour l'extraction de la bdd, j'utilise ici WHERE champ2 LIKE \"$recherche%\", cela s'ignifie que je prend tout ce qui COMMENCE par $recherche, si vous voulez prendre tout ce qui CONTIENT $recherche, mettez un % devant $recherche.

Telechargez ensuite les trois fichiers (livesearch.js, livesearch.php et le fichier dans lequel se trouve le champ) dans le meme repertoire.

Site officiel

Tutorial officiel du script LiveSearch (en anglais) : LiveSearch official WebSite

Demos

*BIG-annuaire
*Magnetik

LiveSearchFr

Difficulté d'installation

Compatibilité

Installation

Site officiel

Demos

Labels: