Magento 2: Multiple search box in the home page

Hi,
I am integrating Algolia search into magento store. The HTML structure of header should be different for desktop and mobile version, So I have to have 2 DOM elements (Only one visible at the time depends on screen size) for search input, But Algolia auto complete properties are not being applied on the second search box. How to handle this? Please help me, Thanks!

Hi @kanagavel.arumugasam,
If you go to Stores > Configuration > Algolia Search > Advanced > Search input DOM Selector, you should be able to put in multiple DOM selectors here – have you tried that?

Hello Maria,

Thanks for the response

I have #search in Search input DOM Selector and html of both of search boxes as below

<input id=“search” type=“text” name=“q” value=""
<input id=“search” type=“text” name=“q” value=""

I had a thought that algolia should be applied when both search input id are same (“search”), Am I wrong?

Regards
Kanagavel

Hi @kanagavel.arumugasam,

Thanks for the additional information!
Having two search HTML elements with the same id is not a good practice, and this is likely to be the reason for the issue.

Could you try to use a class name as selector instead ?

  • You could have your HTML tags look like this:
    <input class=“search” type=“text” name=“q” value="">
  • and add .search as a Search input DOM Selector instead!

I hope this helps!