jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Plugins > Une boîte de recherche un peu smart

Une boîte de recherche un peu smart

jeudi 14 septembre 2006, par Fil

Les jolies boîtes de recherche de Safari ne sont pas compatibles XHTML. Qu’à cela ne tienne !


D’abord un peu de contexte : Safari, le navigateur d’Apple, a introduit un nouveau type de balise <input/> dédiée aux moteurs de recherche.

Ses avantages, entre autres :
— elle est joliment stylée (coins arrondis, interface cohérente) ;
— elle se souvient de l’historique des mots entrés précédemment ;
— elle fonctionne correctement hors de Safari, se comportant alors comme un <input type="text"/> normal.

Son gros inconvénient :
— cette balise n’est pas conforme XHTML.

Pour voir une démo et des explications (en anglais), le site de référence est http://www.andrewescobar.com/archiv... ; la description officielle de cette fonctionnalité se trouve sur le (vieux) blog de Hyatt.

Ce que nous allons faire dans cet exemple, c’est mettre dans notre code HTML une boîte de recherche tout ce qu’il y a de plus banale. Et la doper ensuite au jQuery pour lui ajouter les éléments spécifiques à Safari.

Mais d’abord, notre boîte :

<input id='search' type='text'
   name='q' value='Rechercher...' />

Ajoutons-lui, pour tous les navigateurs, un comportement standard d’effacement du mot « Rechercher... » lors du premier clic dans le champ :

 $('input#search')
 .onefocus(function(){
   $(this).attr('value','');
 });

On remarque qu’on a ici utilisé la fonction jQuery onefocus(), qui s’applique au premier événement focus(), c’est-à-dire dès qu’on entre dans le champ, à la souris ou au clavier.

On conserve notre objet jQuery en mémoire — var o = $('input#search')... —, et on teste ensuite le navigateur. Si c’est Safari, on ajoute les éléments spécifiques introduits par Apple :

 if (jQuery.browser.safari) {
   o.attr('type','search')
    .attr('autosave','com.jquery')
    .attr('results','5');
 }

D’où le script final :

$(document).ready(function(){
 var o =
 $('input#search')
 .onefocus(function(){
   $(this).attr('value','');
 });
 if (jQuery.browser.safari) {
   o.attr('type','search')
    .attr('autosave','com.jquery')
    .attr('results','5');
 }
});

Pour parfaire le tout, ne reste qu’à le transformer en plugin jQuery, qui s’utilise ainsi :

$("input[@name='q']")
.smartsearchbox({
 'autosave':'com.jquery',
 'results':'5'
});

Si on ne veut ni historique ni domaine de recherche, on peut se contenter de $("input[@name='q']").smartsearchbox();

P.-S.

J’ai choisi ici d’indiquer le domaine de recherche com.jquery : si tous les sites traitant de jQuery utilisent la même valeur pour autosave, l’historique des recherches sera conservé d’un site à l’autre.

Documents joints

Répondre à cet article

4 Messages de forum


Derniers commentaires

Nouveautés sur le Web