Jquery & searchbox

[Painstik]

Make an search box like here on this forum.

When you click on input text box "Search..." dissapears, when you click out it appears again.

Open: Panels/Header.Search.html
Find:

Code: Select all

<input type="text" name="search_query"

Change:

Code: Select all

value="%%LNG_Search%%..."

Add at the end of document, after </script>:

Code: Select all

<script type="text/javascript">
            $(document).ready(function() {
               $("#search_query").click(function(e) {
                  $("#search_query").attr({ value: '' });
               });
               $("#search_query").blur(function(){
                  if($(this).attr("value") == "") $(this).attr("value", " %%LNG_Search%%...");
               });
               $(".Button").click(function(e) {
                  if($("#search_query").attr("value") == " %%LNG_Search%%...") $("#search_query").attr("value", "");
                  });
            });
         </script>

Now you can remove h2 label tag, because you have it now inside of search box.

[CharlieFoxtrot]

Very nice!

What happens if customer clicks on the search BUTTON without entering any text? Will a search be performed on the "search..." text that's already displayed in the field?

[Painstik]

Yes, it will search for "search...", I'll try to fix that now. Thanks.

[Painstik]

Ok, this was easy.

Code: Select all

<script type="text/javascript">
				$(document).ready(function() {
					$("#search_query").click(function(e) {
						$("#search_query").attr({ value: '' });
					});
					$("#search_query").blur(function(){
						if($(this).attr("value") == "") $(this).attr("value", " %%LNG_Search%%...");
					});
					$(".Button").click(function(e) {
						if($("#search_query").attr("value") == " %%LNG_Search%%...") $("#search_query").attr("value", "");
						});
			   });
			</script>

Now it will popup that you didn't wrote anything...

[CharlieFoxtrot]

Perfect!