Search Form

[AnotherAndrew]

I'm trying to implement a different version of the search form for my site. The original and functioning code for the search form is this:

<form id='search_form' action='<?php echo $config->urls->root?>search/' method='get'>
    <input type='text' name='q' id='search_query' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES); ?>'/>
    <button type='submit' id='search_submit'>Search</button>
</form>

I want to have an input field to be "hidden" and when clicked on "search" then the input field is revealed and upon return the search query is submitted. So I implemented this code to do that:

<form id='searchform' action='<?php echo $config->urls->root?>search/' method='get'>
    <input type='hidden' name='q' id='search_query' value="<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES); ?>"/>
    <input id="searchterm" name="searchterm" type="text" value="Search"  />
</form>

And my jquery is:

$('#searchterm').focus( function(){ if ( $(this).val() == 'Search' ){ $(this).val('') }; $(this).addClass('searchinputfocused'); });

$('#searchterm').blur( function(){ if ( $(this).val() == '' ){ $(this).val('Search') }; $(this).removeClass('searchinputfocused'); });

However, when I submit a query, it does not return a valid search and nothing is revealed. 

Does anyone know why not and how I can fix this?

[Wanze]

Hi Andrew,

I don't understand what you try to do. Why do you need the hidden field?

Have you also modified the template where the search results are listed?

Because the GET variable q will be empty now and the searchterm is in $_GET['searchterm'].

[AnotherAndrew]

> Have you also modified the template where the search results are listed?

No I have modified anything in the template. Do I need to do so in order to match the query?

[AnotherAndrew]

Answer, solved. 

Basically, I was not following the correct ids for the calls in the search template.

Here's my updated code for anyone who is interested. This will give you a form field that in my case looks like my navigation, but when you click on "search", the text search is removed and an input field appears.

<form id='searchform' action='<?php echo $config->urls->root?>search/' method='get'>
   <input type='hidden' name='q' id='search_querys' value="<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES); ?>"/>
   <input name='q' id='search_query' name="searchterm" type="text" value="Search"  />
</form>

And the jquery:

	$('#search_query').focus( function(){ if ( $(this).val() == 'Search' ){ $(this).val('') }; $(this).addClass('searchinputfocused'); });
	$('#search_query').blur( function(){ if ( $(this).val() == '' ){ $(this).val('Search') }; $(this).removeClass('searchinputfocused'); });

$("#search_querys")
    .val("Search...")
    .css("color", "#ccc")
    .focus(function(){
        $(this).css("color", "black");
        if ($(this).val() == "Search...") {
            $(this).val("");
        }
    })
    .blur(function(){
        $(this).css("color", "#ccc");
        if ($(this).val() == "") {
            $(this).val("Search...");
        }
    });
    
    var regEx = /(\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)/;

And the css which is obviously specific to my site design but the functionality might help others:

#searchform input {display: block; position: relative; top: -4px; font-family: 'Roboto', Arial, sans-serif; font-size: 16px; letter-spacing: 1px; font-weight: 900; text-transform:uppercase; border: none; color: #39683a; width: 155px;}
@-moz-document url-prefix() {#searchform input {top: -2px;}}
#searchform input:focus, .searchinputfocused {  text-transform: none; text-align: left; font-family: 'Roboto', Arial, sans-serif; font-size: 15px; font-weight: 400; text-transform:none; border: none; color: #2b2b2b; border: none; letter-spacing: 0px; padding: 2px; outline: #39683a solid thin; }
#searchform #searchsubmit {display: none; font-family: 'Roboto', Arial, sans-serif; font-size: 16px; letter-spacing: 1px; font-weight: 900; text-transform:uppercase;  }
#searchform #searchsubmit:active, #searchform #searchsubmit:hover, #searchform #searchsubmit:focus { outline: none; cursor:pointer; font-family: 'Roboto', Arial, sans-serif; font-size: 16px; letter-spacing: 0px; font-weight: 500; }