Adding validation to top search bar breaks autocomplete functionality

Question

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...

Answer 1

I wasn't able to get your suggestion to work within my current setup so had to go with jQuery to validate the form without breaking the autocomplete feature:

    (function($) {
        $("#btn-search").click(function(e){
            $(".validation-advice").hide();
            var searchVal = $.trim($("#search").val());
            if(searchVal == '') {
                $("#search").after('<div class="validation-advice" id="advice-search-required-entry-search"><?php echo $this->__('Eenter preformatted text herenter a search term.') ?></div>').fadeIn();
                e.preventDefault();
            }
        });
        $("#search").click(function() {
            $(this).siblings('.validation-advice')
                .fadeOut(function() {
                    $(this).remove();
                }
            );
        });
    })(jQuery);

Answer 2

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', '');

Answer 3

Marius sir is always right.. :)

here is working example me to add methods in varian search

<script type="text/javascript">

        Varien.searchForm.addMethods({
        initAutocomplete : function(url, destinationElement){
        new Ajax.Autocompleter(
            this.field,
            destinationElement,
            url,
            {
                paramName: this.field.name,
                method: 'get',
                minChars: 2,
                updateElement: this._selectAutocompleteItem.bind(this),
                onShow : function(element, update) {
                    if(!update.style.position || update.style.position=='absolute') {
                        update.style.position = 'absolute';
                        Position.clone(element, update, {
                            setHeight: false,
                            offsetTop: element.offsetHeight
                        });
                    }
                    Effect.Appear(update,{duration:0});
                }

            }
        );
    },
    _selectAutocompleteItem : function(element){        
        this.form.submit();
    }    
});

        //<![CDATA[
        $(document).observe('dom:loaded', function () {
            var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search entire store here...') ?>');
            searchForm.initAutocomplete('<?php echo Mage::getBaseUrl() ?>extension/search_autocomplete.php', 'search_autocomplete');
        });        
        //]]>

    </script>

For detail function used in this class you may have look

js\varien\js.js  with class 

Varien.searchForm = Class.create();
Varien.searchForm.prototype = {}

Submit function

Event.observe(this.form,  'submit', this.submit.bind(this));

  submit : function(event){
        if (this.field.value == this.emptyText || this.field.value == ''){
            Event.stop(event);
            return false;
        }
        return true;
    },

you can add your own method as well to validate with your custom functions.

Let me know if i could help you more in this.