Add an onfocus event to the search box

If you’re searching multiple times in your shop, it can become a nuisance to continually highlight your original search text to replace it with the new text.

By adding a javascript onfocus event to the mini search box, whenever someone clicks in the box, the previous text will automatically be cleared out.locate: app/design/frontend/default/YOURTHEME/catalogsearch/form.mini.phtml

Make the following change(s) (create a backup first of course!)


// your original form should look something like this:

<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<div class="form-search">
<label for="search"><?php echo $this->__('Search') ?></label>
<input id="search" type="text" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" />
<button type="submit" title="<?php echo $this->__('Go') ?>" class="button"><span><span><?php echo $this->__('Go') ?></span></span></button>
<div id="search_autocomplete" class="search-autocomplete"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search entire store here...') ?>');
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
//]]>
</script>
</div>
</form>

 

//CHANGE IT TO BELOW - note the change is after the input id = "search"

// We also changed the default text that's displayed in the box

<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<div class="form-search">
<label for="search"><?php echo $this->__('Search:') ?></label>
<input id="search" onfocus='javascript: this.value = ""' type="text" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" />
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button"><span><span><?php echo $this->__('Search') ?></span></span></button>
<div id="search_autocomplete" class="search-autocomplete"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Enter Keyword(s) to Search ..') ?>');
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
//]]>
</script>
</div>
</form>

Leave a Reply