Search Bar dinamica con testo

Ogni blog ha una barra di ricerca, di solito composta da un riquadro bianco dove inserire il testo di ricerca, e accanto un pulsante con scritto “Cerca” o “Search”, con il difetto di occupare gran parte della vostra sidebar, a volta, quando la sidebar è molto stretta, mandando addirittura a capo il pulsante.
Perchè non usare un pò di javascript per superare questo problema? Un esempio lo potete vedere nella barra di ricerca di questo sito, infatti sebbene sia anche presente un ‘pulsante immagine’ per cercare, ho preferito integrare anche questa funzione. Questo metodo è principalmente per wordpress, ma può essere utilizzato per qualiasi barra di ricerca.

• Troviamo il codice che ci interessa

Il codice della searchbar di solito lo troviamo nel file searchform.php all’interno del nostro template, è dovrebbe essere tipo:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

la riga che a noi interessa è

<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />

• Ineriamo il testo “Cerca…”di default

Per salvare spazio, inseriamo il testo search direttamente all’interno del box. Mettiamo un eccezione, in modo che se un utente ha precedentemente utilizzato la funziona ricerca o si trova nella pagina dei risultati della ricerca, si visualizza il termine ricercato.

<input type="text" value="<?php if(is_search() ) { the_search_query(); } else { echo 'Cerca...'; } ?>" name="s" id="s" />

• Aggiungiamo l’effetto javascript

Quando un utente clicca nel box di ricerca non vogliamo obbligarlo a cancellare manualmente il testo “Cerca…”, e se dovesse cliccare nuovamente fuori dal box, senza aver scritto nulla, vogliamo che ricompaia il nostro testo “Cerca…”. Aggiungiamo quindi questo codice prima della chiusura.

onfocus="if(this.value=='Cerca...')this.value='<?php the_search_query(); ?>'" onblur="if(this.value=='')this.value='Cerca...'"

Alla fine il nostro file searchform.php dovrebbe essere:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php if(is_search() ) { the_search_query(); } else { echo 'Cerca...'; } ?>" name="s" id="s" onfocus="if(this.value=='Cerca...')this.value='<?php the_search_query(); ?>'" onblur="if(this.value=='')this.value='Cerca...'" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>