Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Inserire un motore di ricerca nel proprio sito con Google Ajax Search

agosto 23rd, 2010 by Giovanni Caputo

Google AJAX Search API è un servizio gratuito che permette di ricercare all’interno del vostro blog, sito web e video attraverso un modulo di ricerca che svolge le operazioni in Ajax.

Google AJAX Search APII richiede di essere registrati per ottenere API key.  La registrazione è gratutita e può essere effettuata in qualche minuto. Deve essere richiesta una key per ogni dominio in cui si vuole inserire il motore di ricerca.

Vediamo il codice HTML necessario

<!– SEARCH FORM –>
<form action=”http://www.google.com/search” method=”get”>
<!– HTML5 SEARCH BOX!  –>
<input type=”search” id=”search-box” name=”q” results=”5″ placeholder=”Search…” autocomplete=”on” />
<!– SEARCH davidwalsh.name ONLY! –>
<input type=”hidden” name=”sitesearch” value=”davidwalsh.name” />
<!– SEARCH BUTTON –>
<input id=”search-submit” type=”submit” value=”Search” />
</form>

<!– ASYNCHRONOUSLY LOAD THE AJAX SEARCH API;  MOOTOOLS TOO! –>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=MY_REALLY_REALLY_REALLY_REALLY_REALLY_REALLY_LONG_KEY”></script>
<script type=”text/javascript”>
google.load(‘mootools’,’1.2.4′);
google.load(‘search’,’1′);
</script>

Successivamente il codice CSS

/* results positioning */
#search-results        { position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
/* triangle! */
#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
/* content DIV which holds search results! */
#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }

Infine il codice Javascript

window.addEvent(‘domready’,function(){

/* search */
var searchBox = $(‘search-box’), searchLoaded=false, searchFn = function() {

/*
We’re lazyloading all of the search stuff.
After all, why create elements, add listeners, etc. if the user never gets there?
*/
if(!searchLoaded) {
searchLoaded = true; //set searchLoaded to “true”; no more loading!

//build elements!
var container = new Element(‘div’,{ id: ‘search-results’ }).inject($(‘search-area’),’after’);
var wrapper = new Element(‘div’,{
styles: {
position: ‘relative’
}
}).inject(container);
new Element(‘div’,{ id: ‘search-results-pointer’ }).inject(wrapper);
var contentContainer = new Element(‘div’,{ id: ‘search-results-content’ }).inject(wrapper);
var closer = new Element(‘a’, {
href: ‘javascript:;’,
text: ‘Close’,
styles: {
position: ‘absolute’, //position the “Close” link
bottom: 35,
right: 20
},
events: {
click: function() {
container.fade(0);
}
}
}).inject(wrapper);

//google interaction
var search = new google.search.WebSearch(),
control = new google.search.SearchControl(),
options = new google.search.DrawOptions();

//set google options
options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
options.setInput(searchBox);

//set search options
search.setUserDefinedClassSuffix(‘siteSearch’);
search.setSiteRestriction(‘davidwalsh.name’);
search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

//set search controls
control.addSearcher(search);
control.draw(contentContainer,options);
control.setNoResultsString(‘No results were found.’);

//add listeners to search box
searchBox.addEvents({
keyup: function(e) {
if(searchBox.value && searchBox.value != searchBox.get(‘placeholder’)) {
container.fade(0.9);
control.execute(searchBox.value);
}
else {
container.fade(0);
}
}
});
searchBox.removeEvent(‘focus’,searchFn);
}
};
searchBox.addEvent(‘focus’,searchFn);
});

Per maggiori dettagli: http://davidwalsh.name/google-ajax-search

Questo post è stato postato lunedì, agosto 23rd, 2010 at 21:11 nella categoria Programmazione, Tecnologia, tutorial. Tags:, .
Puoi seguire tutti i commenti di questo articolo attraverso RSS 2.0 feed. Puoi lasciare un commento, o trackback dal nostro sito.

Lascia un commento

You must be loggati to post a comment.