Moteur de recherche Qwant

2018-09-29

Un seul formulaire HTML pour accéder à plusieurs moteurs de recherche

Comme on peut voir ci-dessus, j'ai ajouté un quatrième moteur de recherche pour effectuer des recherches limitées aux pages Web de mon site. Qwant, [c]onçu et basé en France, [...] est le premier moteur de recherche qui protège les libertés de ses utilisateurs et veille à préserver l'écosystème numérique. Nos mots clés : vie privée et neutralité. Il est amusant de noter qu'en anglais, le site s'affiche comme ayant été conçu et basé en Europe.

Voici l'URL complète pour faire une recherche de pages de mon site contenant les mots « arduino ota ». Les espaces devraient être remplacés par %20 ou + mais cela rend plus difficile la lecture.

        https://www.qwant.com/?q=arduino ota site:sigmdel.ca/michel
       https://duckduckgo.com/?q=arduino ota&sites=sigmdel.ca/michel
  https://www.google.ca/search?q=arduino ota&sitesearch=sigmdel.ca/michel
   https://www.bing.com/search?q=arduino ota&q1=site:sigmdel.ca/michel

Ci-dessous, on a un formulaire semblable à celui qu'on retrouve dans la page Archives du site complet pour mener une recherche locale avec DuckDuckGo. Le formulaire suivant est un calque modifié pour utiliser le moteur Qwant.

<div> <form method="get" target="_blank" action="https://duckduckgo.com/" /> <input type="text" name="q" maxlength="255" size="32" value="" onclick="this.value='';" placeholder="..." / > <button type="submit" name="sites" value="sigmdel.ca/michel/">DuckDuckGo</button> </form> </div> <br/> <div> <form method="get" target="_blank" action="https://www.qwant.com/" /> <input type="text" name="q" maxlength="255" size="32" value="" onclick="this.value='';" placeholder="..." / > <button type="submit" name="site" value="sigmdel.ca/michel/">Quant</button> </form> </div>

Ces deux formulaires engendrent des requêtes (non encodées) semblables.

  https://duckduckgo.com/?q=arduino+ota&sites=sigmdel.ca/michel/
  https://www.qwant.com/?q=arduino+ota&site=sigmdel.ca/michel/

Toutefois, la seconde requête n'est pas acceptée. En effet, Qwant utilise une syntaxe inhabituelle pour la chaîne de recherche dont le début est marqué avec le ? après l'adresse du moteur. Il n'y a pas de séparateur & avant la paire site et sigmdel.ca/michel. Pourquoi Qwant ne peut faire comme les autres je ne sais pas. Il est donc impossible, à ma connaissance, de soumettre un formulaire en HTML pur, tel celui présenté ci-dessus, pour lancer une recherche. Qwant propose une solution qui repose sur l'utilisation de JavaScript.

<div> <form method="get" target="_blank" action="https://www.xxqwant.com/" onsubmit="addSiteSearch()" /> <input type="text" name="q" id="query" maxlength="255" size="32" value="" onclick="this.value='';" placeholder="..." / > <button type="submit">Qwant</button> </form> <script> function encodeHTML(s) { return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"'); } function addSiteSearch() { document.getElementById('query').value = encodeHTML(document.getElementById('query').value) + " site:sigmdel.ca/michel"; }</script> </div>

La requête est acceptée puisque la fonction addSite ajoute site:sigmdel.ca/michel à la requête q=arduino ota dans le champ de texte du formulaire. Il fallait ajouter un identificateur unique, id="query", pour que la fonction retrouve le champ. Attention, cet identificateur doit être unique dans le document entier pas seulement dans le formulaire. Cette solution présente un problème, car elle modifie le champ de texte. C'est un peu comme si l'on disait à la personne qui lançait une recherche qu'elle aurait dû ajouter l'élément supplémentaire site:sigmdel.ca/michel. De plus, si elle clique de nouveau sur le bouton, l'élément supplémentaire est concaténé au critère de recherche de nouveau. Heureusement, Qwant ne s'en offusque pas.

Pour éviter ce problème, j'ai remplacé la fonction addSiteSearch() par une autre qwantSearch()qui construit l'URL complète et qui fait la requête elle-même contournant la fonction submit du formulaire.

<div> <form method="get" target="_blank"/> <input type="text" name="q" id="query" maxlength="255" size="32" value="" onclick="this.value='';" placeholder="..." / > <button type="button" onclick="qwantSearch()">Qwant</button> </form> <script> function encodeHTML(s) { return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"'); } function qwantSearch() { var qw = document.getElementById('query').value var quer = 'https://www.qwant.com/?q=' + encodeHTML(qw) + ' site:sigmdel.ca/michel'; window.open(quer); }</script> </div>

Il n'est pas trop difficile d'intégrer cette approche au formulaire de recherche qu'on retrouvait en haut de chaque page du site. Celui-ci était le suivant.

Il est devenu un peu plus complexe.

<div class="hcontainer"><div id="search"> <form name="sf" method="get" target="_blank" action="https://duckduckgo.com"><img src="loupe17.png" alt="" width="17" height="17" style="float: left"> <input class="inp" type="text" id="query" name="q" value="" size=25 onclick="this.value='';" placeholder="..." > <div class="buttons"> <button class="btn" type='submit' name="sites" value="sigmdel.ca/michel">DuckDuckGo</button> | <button class="btn" type='button' onclick="qwantSearch()">Qwant</button> | <button class="btn" type='submit' name="sitesearch" value="sigmdel.ca/michel" onclick="sf.action='https://www.google.com/search'; return true;">Google</button> | <button class="btn" type='submit' name="q1" value="site:sigmdel.ca/michel" onclick="sf.action='https://www.bing.com/search'; return true;">Bing</button> </div> </form> <script> function encodeHTML(s) { return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"'); } function qwantSearch() { var qw = document.getElementById('query').value var qurl = 'https://www.qwant.com/?q=' + encodeHTML(qw) + ' site:sigmdel.ca/michel'; window.open(qurl); } </script></div></div>

Comme ci-dessus, le champ de texte du formulaire a maintenant un identificateur unique: id="query". Un bouton additionnel est ajouté à la droite du champ de texte pour Qwant, mais il est de type button plutôt que submit. Ainsi le formulaire ne sera pas soumis lorsque le bouton activé. On ajoute la fonction JavaScript qwantSearch(). Lorsque le bouton Qwant est activé (l'attribut onclick), c'est cette fonction qui est appelée, alors que les autres boutons substituent l'adresse du moteur de recherche désiré dans la requête.

Évidemment, cette approche nécessite JavaScript. Lorsque ce dernier n'est pas activé, le bouton de recherche Quant ne fonctionnera pas du tout. Comme je le notais dans la révision du billet précédent sur ce sujet, les boutons Google et Bing ne fonctionnent pas correctement non plus quand JavaScript est désactivé, mais au moins l'outil de recherche DuckDuckGo est invoqué.

Encore une fois, si quelqu'un pouvait me fournir une solution qui n'utilise que le HTML/CSS, j'en serais très reconnaissant.

Un seul formulaire HTML pour accéder à plusieurs moteurs de recherche