Adding Validation to Top Search Bar Breaks Autocomplete Functionality

autocompletecatalogsearchform-validationjavascript

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

var searchForm = new VarienForm('search_mini_form', 'search', '');

VarienForm does not contain a initAutocomplete function.
That line should be

var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
Related Topic