I have a problem where adding validation to the top search bar causes the Auto-complete to stop working.
Here is the code for validation which works but breaks auto-complete.
<form id="search_mini_form" class="header-search" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<div class="mini-form form-search">
<button type="submit" class="button-alt" title="<?php echo $this->__('Go') ?>"><?php echo $this->__('Go') ?></button>
<div class="mini-form-input">
<input id="search" type="text" value="<?php echo $this->htmlEscape(Mage::app()->getRequest()->getParam($catalogSearchHelper->getQueryParamName())); ?>" class="search-required-entry" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" placeholder="<?php echo $this->__('Search mysite.com…') ?>"/>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
Validation.add('search-required-entry', 'Please enter a search term to get started.', function(v){
return !Validation.get('IsEmpty').test(v);
});
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
//]]>
</script>
</div>
</form>
The code for the actual validation is below:
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
Validation.add('search-required-entry', 'Please enter a search term to get started.', function(v){
return !Validation.get('IsEmpty').test(v);
});
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
//]]>
</script>
Has anyone found a way to have auto-complete and validation work on the same form?
If you can help I'd be very grateful…
Best Answer
This is your problem
VarienForm
does not contain ainitAutocomplete
function.That line should be