Duplicated the Search form , but works properly only on one

Question

I'm using Magento 2, and what I'm trying to do is to duplicate the search form, one for the desktop version and one for mobile, hiding one and another on different versions.

The problem is that on mobile, when I click the search icon, the window doesn't show up, cause it calls the desktop version, and that one is hidden.

I've duplicated already the .phtml file, and tried to solve this, but no success, any idea?

Answer 1

you have to just call different file for each mobile and desktop search box functionlity,

add inside default.xml file,,

<block class="Magento\Framework\View\Element\Template" name="top.search.mobile" as="topsearchmobile" template="Magento_Search::form.mini-mobile.phtml" />

Inside your theme topmenu.phtml file,

app/design/frontend/{Vendor}/{themename}/Magento_Theme/templates/html/topmenu.phtml

Add line before </nav>, <?php echo $this->getLayout()->getBlock('top.search.mobile')->toHtml(); ?>

Override form.mini.phtml file from core folder to your theme,

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
?>
<?php
/** @var $block \Magento\Framework\View\Element\Template */
/** @var $helper \Magento\Search\Helper\Data */
$helper = $this->helper('Magento\Search\Helper\Data');
?>
<div class="block block-search">
    <div class="block block-content">
        <form class="form minisearch" id="search_mini_form-mobile" action="<?php /* @escapeNotVerified */ echo $helper->getResultUrl() ?>" method="get">
            <div class="field search">
                <label class="label" for="search" data-role="minisearch-label">
                    <span><?php /* @escapeNotVerified */ echo __('Search'); ?></span>
                </label>
                <div class="control">
                    <input id="search"
                           data-mage-init='{"quickSearch":{
                                "formSelector":"#search_mini_form-mobile",
                                "url":"<?php /* @escapeNotVerified */ echo $block->getUrl('search/ajax/suggest'); ?>",
                                "destinationSelector":"#search_autocomplete-mobile"}
                           }'
                           type="text"
                           name="<?php /* @escapeNotVerified */ echo $helper->getQueryParamName() ?>"
                           value="<?php /* @escapeNotVerified */ echo $helper->getEscapedQueryText() ?>"
                           placeholder="<?php /* @escapeNotVerified */ echo __('Search here...'); ?>"
                           class="input-text"
                           maxlength="<?php /* @escapeNotVerified */ echo $helper->getMaxQueryLength();?>"
                           role="combobox"
                           aria-haspopup="false"
                           aria-autocomplete="both"
                           autocomplete="off"/>
                    <div id="search_autocomplete-mobile" class="search-autocomplete"></div>
                    <?php echo $block->getChildHtml() ?>
                </div>
            </div>
            <div class="actions">
                <button type="submit"
                        title="<?php echo $block->escapeHtml(__('Search')) ?>"
                        class="action search">
                    <span><?php /* @escapeNotVerified */ echo __('Search'); ?></span>
                </button>
            </div>
        </form>
    </div>
</div>

Deploy content and check for your both version.

You have keep your form id differnt from core file. i have changed form id with our own id.