Google AJAX Search API sur Blogger

(démo : http://google-ajax-search-api-tests.blogspot.com/)

Le but de cet article est de vous expliquer comment ajouter un moteur de recherche AJAX sur votre blog Google grace à Google AJAX Search API.
Ce script effectue une recherche sur les blogs et les sites référencés par Google.
This post provides instructions on how to add AJAX search engine to your Google blog with Google AJAX Search API.
This script do a research on the blogs and the sites referred by Google.

1) Vous devez vous enregistrer pour obtenir une clé Google AJAX Search API.
1) You must Sign up for a Google Ajax Search API Key

2) Créez un premier élément de page de type "HTML/JavaScript"
(c'est l'élément qui accueillera les résultats des recherches)
2)Create a first "HTML/JavaScript" page element
(it is the element for the search results)

3) Copiez/collez le texte suivant dans le champs contenu
3) Cut and paste this code to the content of the widget

<div id="containerResults"><span id="texterecherche"></span>
<span id="searchResults"></span></div>

4) Enregistrez puis faites un glisser/déplacer de cet élément au dessus de l'élément "Messages blog" (celui qui reçoit les articles de votre blog)
4) Save it, drag and drop it above the blog posts element


5) Créez un second élément de page de type "HTML/JavaScript"
(c'est l'élément qui accueillera le champs de recherche)
5) Create a second "HTML/JavaScript" page element (for the search box)

6) Copiez/collez le code ci-dessous dans le champs contenu
6) Cut and paste the code below to the content of the widget

<div id="searchForm"></div>

7) Il vous faut maintenant modifier le code HTML de votre blog pour y ajouter le code suivant juste avant la balise </head> :
7) You should now modify your blog template to add this code just before the </head> tag

<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/>
<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0
&key=votrecle' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>
//<![CDATA[

function recreer () {
var searchResults = document.createElement("span");
searchResults.setAttribute("id", "searchResults");
parentElement.appendChild(searchResults);

var texterecherche = document.createElement("span");
texterecherche.setAttribute("id", "texterecherche");
parentElement.appendChild(texterecherche);
}

function voir (elem) {
var w = document.getElementById(elem);
w.style.display = 'block';
document.getElementById('texterecherche').innerHTML = "<a href=\"javascript:voir('searchResults');\">afficher</a>|<a href=\"javascript:cacher('searchResults');\">masquer</a>|<a href=\"javascript:fermer('searchResults');recreer();OnLoad();\">
fermer</a>"; }

function cacher (elem) {
var w = document.getElementById(elem);
w.style.display = 'none';
}

function fermer(Idv)
{
var formElement = document.getElementById(Idv);
parentElement = formElement.parentNode;
while ( parentElement.hasChildNodes() ) {
parentElement.removeChild( parentElement.firstChild );
}
}
// pour memoriser l'element parent de searchResults
parentElement ='';

function blogApp() {
var rFDiv = document.getElementById("searchForm");
var lDiv = document.getElementById("searchResults");

this.Controle = new GSearchControl();

this.searchForm = new GSearchForm(true, rFDiv);

this.searchForm.setOnSubmitCallback(this, blogApp.prototype.onSubmit);
this.searchForm.setOnClearCallback(this, blogApp.prototype.onClear);
this.Controle.setSearchStartingCallback(this, blogApp.prototype.OnSearchStarting);
this.Controle.setSearchCompleteCallback(this, blogApp.prototype.OnSearchComplete);

var searcher;

searcher = new GblogSearch();
this.Controle.addSearcher(searcher);
searcher.setUserDefinedLabel("Resultats pour les blogs");
searcher = new GwebSearch();
this.Controle.addSearcher(searcher);
searcher.setUserDefinedLabel("Resultats pour les sites");

var drawOptions = new GdrawOptions();

drawOptions.setSearchFormRoot(
document.getElementById("searchForm"));

this.Controle.draw(lDiv, drawOptions);

}

blogApp.prototype.onSubmit = function(form) {
var q = form.input.value;
if (q && q!= "") {
this.Controle.execute(q);
}
return false;
}

blogApp.prototype.OnSearchStarting = function(sc, searcher, query) {
voir('searchResults');
}

blogApp.prototype.OnSearchComplete = function(sc, searcher) {

if ( searcher.results && searcher.results.length > 0) {
document.getElementById('texterecherche').innerHTML = "<a href=\"javascript:voir('searchResults');\">afficher</a>|<a href=\"javascript:cacher('searchResults');\">masquer</a>|<a href=\"javascript:fermer('searchResults');recreer();OnLoad();\">
fermer</a>"; }
}

blogApp.prototype.onClear = function(form) {
this.Controle.clearAllResults();
form.input.value = "";
return false;
}

function OnLoad() {
new blogApp();
cacher('searchResults');
}
GSearch.setOnLoadCallback(OnLoad);

//]]>
</script>

8) n'oubliez pas de remplacer "votrecle" (key=votrecle) par la clé qui vous a été fournie par google.
8) don't forget to replace “votrecle” (key=votrecle) by the key which was provided to you by google.

9) Il ne vous reste plus qu'à ajouter des styles CSS pour restyler le champs de recherche et l'affichage des résultats.
(Je vous suggère d'aller voir la feuille de style ci-dessous)
9) You can now use your custom CSS directives to restyle portions of the search control and results.
(i suggest you to see the style sheet below)
http://www.google.com/uds/css/gsearch.css

démo : http://google-ajax-search-api-tests.blogspot.com/

Blogger Buzz: AJAX Search API Hackery