Webmasters : Un module de recherche vraiment personnalisé : comme de la confiture sur une tartine

Créer un look personnalisé pour votre site peut être source de gros bénéfices. Souvent, permettre aux utilisateurs de rechercher parmi le contenu de votre site et de sites connexes les aide à trouver ce dont ils ont besoin plus rapidement. Après tout, une expérience d’utilisation optimisée rime avec visiteur comblé. Voici quelques exemples de personnalisation d’un moteur de recherche aussi simples (et délicieux) à mettre en place que de la confiture sur une tartine.

Nous commençons avec l’élément Custom Search, qui utilise CustomSearchControl pour ajouter la recherche personnalisée à ma page. Si vous n’avez jamais utilisé un moteur de recherche personnalisé avant, je pense que vous allez adorer : il utilise la technologie de recherche Google pour inclure des sites web partenaires à votre index de recherche, et vous pourrez toucher une part des revenus publicitaires.

L’un des avantages d’utiliser les APIs de recherche AJAX pour intégrer un moteur de recherche à vos pages web est que vous pouvez également contrôler l’apparence des résultats de recherche en utilisant des standards libres comme les feuilles de style en cascade (CSS). En combinant cette mise en forme avec la recherche personnalisée, vous pouvez créer une expérience de recherche entièrement intégrée à votre site.

Vous pouvez commencer par modifier le champ de recherche (dynamiquement ajouté à votre page par défaut) pour utiliser un autre champ de recherche que vous aurez placer vous-mêmes sur la page où vous le souhaitez.

// Set drawing options to use my text box
// as input instead of having the library create one.
var drawOptions = new google.search.DrawOptions();
drawOptions.setInput(document.getElementById('query_input'));

// Draw the control in content div
customSearchControl.draw('results', drawOptions);

Avec les modifications ci-dessus, nous obtenons une page comme celle-ci :

Maintenant que nous sommes capables d’utiliser un champ de recherche personnalisé (admirez, même pas besoin de cliquer sur un bouton !), nous pouvons ajouter des règles CSS pour changer les polices, les couleurs, et bien plus.

Par exemple, comparez ce style avec celui par défaut.

Jetez un oeil aux règles CSS pour avoir une idée du fonctionnement, et comment vous pouvez le personnaliser aux couleurs de votre propre site.

Nous pouvons changer la police et ajouter une bordure autour de chaque résultat de recherche :

#results .gsc-results {
/* Sets font for titles, snippets, and URLs. */
font-family: arial, helvetica, sans-serif;
}

#results .gsc-result {
position: relative;
border: 1px solid #eee;
border-left: 10px solid #eee;
padding: 8px 8px 8px 20px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

Nous pouvons également changer le style d’un seul résultat lorsque le visiteur le survole :

#results .gsc-result:hover {
border: 1px solid #888;
border-left: 10px solid #888;
}

Ce ne sont que quelques exemples. L’interprétation du CSS étant effectuée côté navigateur, vous pouvez utiliser n’importe quelle règle CSS pour sélectionner des portions des résultats de recherche. Pour plus d’informations sur la structure HTML et CSS des résultats, consultez la documentation.

Par Jeff Scudder, développeur