Javascript

Moteur de recherche pour votre site

Recherche sur un choix de moteurs distants - Avec option de recherche locale via « Google »

Savez-vous que vous pouvez indiquer à « Google » de limiter sa recherche sur un domaine particulier? C’est non seulement une solution simple et économique, mais aussi très performante. Le script proposé ici permet le choix de plusieurs moteurs de recherche via un bouton radio.

Pour régler le cas de « Google », que certains sites professionnels utilisent avec succès, sachez qu’il suffit d’ajouter à la requête le mot « site: » suivit de votre domaine : « site:trucsweb.com ».

Exemple : http://www.google.com/search?q=Flash+site:www.trucsweb.com

Création du formulaire
Le formulaire peut avoir ou non une action par défaut, mais, avec une action par défaut, la méthode devient importante. Capturer l’envoie du formulaire (l’événement « onsubmit ») afin d’acheminer la requête et le choix du moteur à la fonction Javascript « twMultiRech». Noter l’importante présence du « return » qui permet par la suite d’anuler ou non l’envoie du formulaire à l’action par défaut.

<form name="maRecherche" onSubmit="return twMultiRech(this.q.value,this.moteurs);">

• Le formulaire demande au moins un champ texte, « Google » identifie la chaîne de recherche par "q" alors pourquoi pas?.
• Les « boutons radio » pour sélectionner la recherche, autant de bouton que de moteurs de recherche. En autant qu’ils aient tous le même nom, pourquoi pas "moteurs" (avec un "s" car c’est un tableau (array) avec plusieurs boutons!).
• Et enfin le bouton d’envoie, un type « submit » tout simplement.

En d’autres mots :

<form name="maRecherche" onSubmit="return twMultiRech(this.q.value,this.moteurs);">
<input type="text" name="q" size="15" maxlength="255" value="" />
<input type="radio" name="moteurs" value="1" checked>Moteur #1
<input type="radio" name="moteurs" value="2">Moteur #2
<input type="radio" name="moteurs" value="3">Moteur #3
<input type="submit" name="Submit" value="Recherche">
</form>

On peut voir dans l’exemple 3 moteurs différent (et un 4ième possible avec une action par défaut).

<form name="maRecherche" action="recherche.asp" method="post" onSubmit="return twMultiRech(this.q.value,this.moteurs);">
<input type="text" name="q" size="15" maxlength="255" value="" />
<input type="radio" name="moteurs" value="1" checked>Moteur #1
<input type="radio" name="moteurs" value="2">Moteur #2
<input type="radio" name="moteurs" value="3">Moteur #3
<input type="submit" name="Submit" value="Recherche">
</form>

La fonction « twMultiRech »
C’est donc la fonction qui fait tout le travail, soit d’identifier le moteur et construire la requête correspondante sur la bonne adresse. On teste donc en premier lieu la valeur de notre bouton radio « moteurs » qui va ainsi :

function twMultiRech(_chaine,_type) {
  if (_type[1].checked) {
    // Le moteur #1
  }
  if (_type[2].checked) {
    // Le moteur #2
  }
  if (_type[3].checked) {
    // Le moteur #3
  }
}

Exemple de recherche locale avec « Google » sur la même page. Changer le url du document avec la chaine de recherche, j’ai ajouter la recherche locale sur le domaine des Trucsweb.com.

location.href = ("http://www.google.com/search?lr=lang_fr&cr=&q="+ _chaine + ’+site:www.trucsweb.com’);

Exemple sur une nouvelle page avec Window.open. Le même principe mais en forcant une nouvelle page.

var sUrl = "http://www.google.com/search?lr=lang_fr&cr=&q="+ _chaine + ’+site:www.trucsweb.com’);
window.open(sUrl,’Google’,’toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes’);

Le « return »
Il ne faut surtout pas oublier d’annuler l’événement du « submit » sinon l’action par défaut sera automatiquement provoquée. Pour ce faire le mot « return » a été ajouté avant l’appel de la fonction. Ce mot attend tout simplement que la fonction lui retourne "vrais" ou "faux" (true/false).

// Retourner "faux" (false) pour annuler l’action par défaut ou plutôt le comportement « submit »
return false;

Exemple suivit du code complet :

function twMultiRech(_chaine,_type) {
  if (_type[2].checked) {
    // Le moteur #2 - Google locale nouvelle page
    var sUrl = ’http://www.google.com/search?lr=lang_fr&cr=&q=’+ _chaine + ’+site:www.trucsweb.com’;
    window.open(sUrl,’Google’,’toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes’);
    return false;
  }
}

Exemple complet :

<html><head>
<title>Trucsweb - Recherche sur un choix de moteurs distants</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" language="javascript">
function twMultiRech(_chaine,_type) {
  // Script gatuit des Trucsweb.com
  if (_type[0].checked) {
    // L’action par défaut
    // return false; mais il l’est par défaut!
  }
  if (_type[1].checked) {
    // Le moteur #1 - Google locale
    location.href = ’http://www.google.com/search?lr=lang_fr&cr=&q=’+ _chaine + ’+site:www.trucsweb.com’;
    return false;
  }
  if (_type[2].checked) {
    // Le moteur #2 - Google locale nouvelle page
    var sUrl = ’http://www.google.com/search?lr=lang_fr&cr=&q=’+ _chaine + ’+site:www.trucsweb.com’;
    window.open(sUrl,’Google’,’toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes’);
    return false;
  }
  if (_type[3].checked) {
    // Le moteur #3 - Google nouvelle page
    var sUrl = ’http://www.google.com/search?lr=lang_fr&cr=&q=’+ _chaine;
    window.open(sUrl,’Google’,’toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes’);
    return false;
  }
}
</script>
</head>

<body bgcolor="#FFFFFF"><h3>Recherche sur un choix de moteurs distants</h3>
<form name="maRech" action="http://www.trucsweb.com/Recherche/default.asp" method="post" onSubmit="return twMultiRech(this.rech.value,this.moteurs);">
<input type="text" name="rech" size="15" maxlength="255" value="" /><input type="submit" name="Submit" value="Recherche">
<br /><input type="radio" name="moteurs" value="0" checked="checked"> Moteur par défaut<br /
><input type="radio" name="moteurs" value="1"> Moteur #1 Google locale<br />
<input type="radio" name="moteurs" value="2"> Moteur #2 Google locale nouvelle page<br />
<input type="radio" name="moteurs" value="3"> Moteur #3 Google nouvelle page
</form>
</body>
</html>