Добавление проверки в верхнюю строку поиска нарушает функцию автозаполнения

У меня проблема, когда добавление проверки в верхнюю строку поиска приводит к тому, что автозаполнение перестает работать.

Вот код для проверки, который работает, но прерывает автозаполнение.

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

Код для фактической проверки приведен ниже: 

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

Кто-нибудь нашел способ, чтобы автоматическое заполнение и проверка выполнялись в одной и той же форме?

Если вы можете помочь, я был бы очень признателен...

Author: user1704524, 2015-03-23
Source

3 answers

Это ваша проблема 

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

VarienForm не содержит функции initAutocomplete.
Эта строка должна быть

var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
 2
Author: Marius, 2015-04-09 09:58:40

Я не смог заставить ваше предложение работать в рамках моей текущей настройки, поэтому мне пришлось использовать jQuery для проверки формы, не нарушая функцию автозаполнения: 

    (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);
 2
Author: user1704524, 2015-04-13 16:43:33

Мариус сэр всегда прав..:)

Вот рабочий пример, в котором я добавляю методы в поиск вариантов 

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

Для подробной функции, используемой в этом классе, вы можете посмотреть

js\varien\js.js  with class 

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

Функция отправки 

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;
    },

Вы также можете добавить свой собственный метод для проверки с помощью пользовательских функций.

Дайте мне знать, если я смогу вам больше помочь в этом.

 1
Author: liyakat, 2015-04-09 11:37:18