Mail Bag
Answering Your Questions Since... 9:30am
Joined: 28 Aug 2005
Posts: 113
|
 Posted: Feb 21, 2008 04:20pm Post subject: Pre-Populated Search Field that Clears when Clicked |
 |
|
| Quote: | | I was wondering if you could tell me if it's possible to populate the "search box" with a custom bit of text. For example, the field where the customer would enter a search term would have the text "Find A Product" and when they clicked in the field, it would disappear and let them enter their search term. Is this possible? |
Yep. This is possible, and pretty simple too. The instructions to do this has two parts:
-------------------------------------------------------------------------------------
Part One: Replace the Search Field QuickCode Tag in your templates with the HTML code equivalent.
Since we're going to be making a custom version of the Search Field, we'll first need to get a copy of the Search Field's HTML source code. Fortunately, this source code is already documented for us in the QuickCode Tag Glossary .
Normally, the Search Field in the store is created by using the "{FIELD-SEARCH}" QuickCode Tag in your HTML templates. The Glossary page displays the HTML source code that this QuickCode Tag is translated into, which looks something like this:
| Code: | <input name="search_submit" type="hidden" id="search_submit" value="search_submit" />
<input name="search_string" class="FIELD-SEARCH" type="text" size="25" id="search_string" value="<?=htmlspecialchars(mm_unmangle($_SESSION[$basename]['search_string']), ENT_QUOTES)?>" /> |
Now that the HTML source code for the Search Field has been obtained, we'll need to make a couple of minor edits to it.
-------------------------------------------------------------------------------------
Part Two: Customize the Search Field's HTML code
First, we want to make an adjustment to pre-populate the Search Field with the phrase "Find a Product". To do this replace the following: | Code: | | value="<?=htmlspecialchars(mm_unmangle($_SESSION[$basename]['search_string']), ENT_QUOTES)?>" |
with this: | Code: | | value="Find a Product" |
Next, add a command to clear that text from the Search Field when the user first clicks on it. This will be accomplished with a little JavaScript. Add the following to the Search Field HTML tag: | Code: | | onClick="if(this.value == 'Find A Product') this.value='';" |
The Search Field will now be pre-populated with "Find a Product", and it will automatically clear itself when the customer first clicks on it. The final version of the modified Search Field code looks like this: | Code: | <input name="search_submit" type="hidden" id="search_submit" value="search_submit" />
<input name="search_string" id="search_string" class="FIELD-SEARCH" type="text" size="25" value="Find A Product" onClick="if(this.value == 'Find A Product') this.value='';" /> |
-------------------------------------------------------------------------------------
The text "Find a Product" can be changed to any text you want. Just be sure to change the text in both the locations in the code above. |
|
Advanced Search
Register
Profile
FAQ
Memberlist
Log in
