Ajouter "Rechercher..." à la barre de recherche

[Tatooine]

Bonjour à tous !

 

Etant un peu une bille en développement, je fais appel à vos lumières. J'imagine que ça ne doit pas être très compliqué.

 

J'ai installé un template sur Prestashop, et j'aimerais rajouter le terme "Rechercher..." à l'interieur de la barre de recherche, et qu'au clic dans la barre, ça disparaisse pour laisser libre court à la recherche de l'utilisateur.

Cette fonction est sur énormément de sites, mais malheureusement pas sur mon template...

 

Je vous donne le code inclus dans mon fichier du menu, incluant la barre de recherche :

 

	{if $MENU != ''}
<!-- Menu -->
	<nav id="eb-top-nav" class="clearfix">
	  <ul class="eb-nav clearfix">
		{$MENU}
		{if $MENU_SEARCH}
		<li class="sf-search noBack" style="float:right">
		  <form id="searchbox" action="search.php" method="get">
			<input type="hidden" value="position" name="orderby"/>
			<input type="hidden" value="desc" name="orderway"/>
			<input type="text" text="test" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{/if}" />
			<input type="submit" name="submit_search" value="{l s='Search'}" class="button" />
		  </form>
		</li>
		{/if}
	  </ul>
	<div class="sf-right"> </div>
	{/if}
	</nav>
	{literal}
	<script>

$(document).ready(function() {
	$('ul.sf-menu').superfish({
		delay:	   1000,							// one second delay on mouseout
		animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
		speed:	   'fast',						  // faster animation speed
		autoArrows:  false,						   // disable generation of arrow mark-up
		dropShadows: false							// disable drop shadows
	});
});

</script>
{/literal}
<!--/ Menu -->

 

Merci d'avance et bonne journée à tous !

[Hedrad]

text="test"

C'est dans value qu'il faut mettre la valeur par défaut. Il y a 2 fichiers tpl dans le module blocksearch selon là où il est greffé, regarde dans l'autre, il me semble que tu trouveras la réponse à ta question.

[Tatooine]

Merci beaucoup, en effet ça prend bien en compte le texte.

Mais ça ne l'efface pas au clic de la souris, comment faire ça ?

 

voici le code:

 

<form id="searchbox" action="search.php" method="get">
		    <input type="hidden" value="position" name="orderby"/>
		    <input type="hidden" value="desc" name="orderway"/>
		    <input style="font-size:11px;" type="text" name="search_query" value="Recherchez..." />
		    <input type="submit" name="submit_search" value="{l s='Search'}" class="button" />
		  </form>

[Tatooine]

J'ai remplacé value par placeholder et ça marche !

[SiteProjet]

Bonjour.

 

"placeholder" est peut-être en effet la meilleure façon afin de ne pas avoir à utiliser de JS pour cela.

Cependant attention, il s'agit d'une nouveauté de l'HTML 5 et il y a fort à parier que bon nombre de vos visiteurs ne puissent le voir (cf image ci-dessous).

 

N'hésitez pas à demander si vous souhaitez plutôt opter pour un couplet avec JS (certes plus lourd mais bien plus compatible).

 

[Tatooine]

Oui en effet, "placeholder" risque de ne pas être compatible avec tout le monde.

Quel serait dans ce cas le code JS ?

 

Merci beaucoup.

[SiteProjet]

Bonjour.

 

Il existe énormément de façon de procéder.

Un exemple au hasard : http://www.dzone.com/snippets/clear-default-text-onclick