Per un sito ricco di contenuti, un motore di ricerca interno è un servizio da implementare. Se non si hanno esigenze particolari o le risorse per crearne uno con database o sistemi più complessi, possiamo affidarci a chi di motori di ricerca se ne intende. Su Google, Yahoo e MSN Search è possibile sfruttare particolari operatori per restringere la ricerca ad un sito (dominio) specifico. Lo script di questa settimana consente di inserire sulle nostre pagine un modulo per ricerche all'interno del sito con l'opzione di scegliere uno dei 3 grandi motori. La configurazione, come vedremo, è semplicissima. In pochi minuti potremo arricchire il nostro sito con un servizio indispensabile.
Lo script è costituito da una sezione Javascript da incorporare direttamente nel corpo della pagina.
- esempio.htm
## 1: SEZIONI JAVASCRIPT e HTML
Dal momento che genera un form per la ricerca, il codice Javascript va inserito nel punto della pagina in cui vogliamo farlo apparire. Analizziamo la prima parte, quella che comprende il modulo:
form name="jksearch" action="http://www.google.com/search" method="get" onSubmit="jksitesearch(this)">
<p>Cerca su HTML.it:<br />
<input id="hiddenquery" type="hidden" name="q" />
<input name="qfront" type="text" style="width: 200px" value="javascript" /> <input type="submit" value="Search" /><br />
<div>Google:<input name="se" type="radio" checked> Yahoo:<input name="se" type="radio"> MSN:<input name="se" type="radio">
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Prima raccomandazione: non modificare gli 'id' e i nomi ('namè) dei singoli campi e del form. Se lo si fa, bisognerà modificare di conseguenza anche i riferimenti contenuti nella parte Javascript.
Come si vede, la action del form è impostata di default per svolgere ricerche su Google (risulta già selezionato anche il radio box corrispondente). Il primo campo è nascosto, di tipo 'hidden': serve alla creazione della query di ricerca sui 3 diversi motori. Il secondo è il box di ricerca vero e proprio. Nell'esempio abbiamo impostato un valore predefinito (value="javascript") che può ovviamente essere tranquillamente eliminato, lasciando così il campo di testo vuoto. Infine, troviamo 3 radio button da cui l'utente potrà selezionare il motore su cui effettuare la ricerca. Passiamo alla parte Javascript:
<script type="text/javascript">
//Inserire qui il nome del dominio
var domainroot="www.html.it"
var searchaction=[
"http://www.google.com/search",
"http://search.yahoo.com/search",
"http://search.msn.com/results.aspx"
]
var queryfieldname=["q","p","q"]
function switchaction(cur, index){
cur.form.action=searchaction[index]
document.getElementById("hiddenquery").name=queryfieldname[index]
}
function jksitesearch(curobj){
for (i=0; i< document.jksearch.se.length; i++){ //loop through radio to see
which is checked
if (document.jksearch.se[i].checked==true)
switchaction(document.jksearch.se[i], i)
}
document.getElementById("hiddenquery").value="site:"+domainroot+"
"+curobj.qfront.value
}
C'è solo una parte da personalizzare. Si tratta della variabile 'domainroot'. Essa andrà impostata inserendo il dominio del nostro sito. Tutto qui. Il resto dello script può essere lasciato intatto.
