Magento搜索在同一页面上使用两种形式自动完成

时间:2018-07-29 21:12:40

标签: javascript magento autocomplete

我正在尝试解决以下问题:在Magento安装(CE 1.9.3.4)上,我安装了一个扩展程序,该扩展程序通过覆盖默认的自动完成功能来实现更好的搜索自动完成功能:

Varien.searchForm.prototype.initAutocomplete = function(url, destinationElement) { 
...

在我的模板中,我有两种搜索形式,一种用于移动设备,一种用于台式机,与我的header.phtml相同,只是两次包含了form.mini.phtml文件:

<div id="search_mobile" class="visible-xs col-xs-4 text-right">
...
<?php echo $this->getChildHtml('topSearch') ?>

<div id="search_desktop" class="hidden-xs col-xs-12 col-sm-4 col-md-4 col-lg-4">
...
<?php echo $this->getChildHtml('topSearch') ?>

但是,自动完成功能仅适用于第一种形式(移动形式),不适用于第二种形式。因此,我决定通过Mage :: registry()检查是否已经包括了.phtml文件形式,以“拆分”这两种形式并给它们提供不同的id。    此方法有效,因为两种形式现在具有不同的ID。但是,桌面搜索表单的自动完成功能(加载顺序中的第二个)仍然不起作用。我是否缺少明显的东西?相关表格代码:

<?php if ($searchAlreadyLoaded == 'N'): ?>

<?php Mage::unregister('SEARCH_LOADED'); Mage::register('SEARCH_LOADED','Y'); ?>

<form id="search_mini_form" class="navbar-form form-app" role="search" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
    <div class="form-group form-search">
        <label class="sr-only" for="search"><?php echo $this->__('Search:') ?></label>
        <input id="search" placeholder="<?php echo $this->__('Search'); ?>" class="form-control" type="text" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" />
        <button type="submit" title="<?php echo $this->__('Search') ?>" class="button"><span class="i-search" aria-hidden="true" data-icon="&#x55;"></span><span class="sr-only"><?php echo $this->__('Search') ?></span></button>
        <div id="search_autocomplete" class="search-autocomplete"></div>
        <script type="text/javascript">
        //<![CDATA[
            var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo Mage::helper('core')->jsQuoteEscape($this->__('Search entire store here...')) ?>');
            searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
        //]]>
        </script>
    </div>
</form>

<?php else : ?>

<form id="search_mini_form_desktop" class="navbar-form form-app" role="search" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
    <div class="form-group form-search">
        <label class="sr-only" for="search"><?php echo $this->__('Search:') ?></label>
        <input id="search_desktop" placeholder="<?php echo $this->__('Search'); ?>" class="form-control" type="text" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" />
        <button type="submit" title="<?php echo $this->__('Search') ?>" class="button"><span class="i-search" aria-hidden="true" data-icon="&#x55;"></span><span class="sr-only"><?php echo $this->__('Search') ?></span></button>
        <div id="search_autocomplete_desktop" class="search-autocomplete"></div>
        <script type="text/javascript">
        //<![CDATA[
        var searchFormDesktop = new Varien.searchForm('search_mini_form_desktop', 'search_desktop', '<?php echo Mage::helper('core')->jsQuoteEscape($this->__('Search entire store here...')) ?>');
        searchFormDesktop.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete_desktop');
        //]]>
</script>
</div>
</form>

<?php endif; ?>

将窗体放置在它们各自的容器div中,这些容器div取决于当前屏幕大小而显示或隐藏,因此实际上仅显示一个。这可以正常工作。

再次无法正常工作的是桌面表单的自动完成功能-我以为罪魁祸首是重复的searchForm变量,但据我所知,现在没有冲突,我修改了Varien .searchForm()和initAutocomplete()参数。

有任何提示吗?

0 个答案:

没有答案