1

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

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', '');
  • thanks for the feedback, I've made the change you suggest but now the autocomplete works but the validation doesn't... – user1704524 Apr 9 '15 at 10:09
2

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);
1

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.

  • Thanks for you response, I'm trying to validate the search form so that it cannot be submitted if empty... – user1704524 Apr 9 '15 at 11:33
  • @user1704524, function already define and bind in class to check empty value. see my updated code. you should have to test it carefully.i am sure it will work for you – liyakat Apr 9 '15 at 11:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.