Search and Promote autocomplete

[#1]

Hi, How can we have multiple searchbars with autocomplete enabled on a page. For example, I have searchbar in header and footer section, autocomplete feature is working with id="q" parameter. We can't have duplicate id on the HTML. Any pointers on how to enable autocomplete feature for both searchbars on header and footer.

<form name="searchform" method="get" action="results.html" target="_blank">
<input type="text" id="q" name="q" />
<input type="submit" value="Search" />
<div id="autocomplete"></div>
</form>

[#2 · Accepted solution]

Reply from Arun:

If you are using a custom component, then I think you can have different ids. and based on search input, you can trigger an Ajax request to get autocomplete results with q query parameter in both the cases. It will be just input filed id which is different.

<form name="searchform" method="get" action="results.html" target="_blank">
<input type="text" id="header--serach-input" name="q" />
<input type="submit" value="Search" />
<div id="autocomplete"></div>
</form>

<form name="searchform" method="get" action="results.html" target="_blank">
<input type="text" id="footer--serach-input" name="q" />
<input type="submit" value="Search" />
<div id="autocomplete"></div>
</form>

[kishore_polsani]

hi,

Are you using AEM core component? Can you please explain?

[kishore_polsani]

This is a custom component.

[Arun_Patidar]

If you are using a custom component, then I think you can have different ids. and based on search input, you can trigger an Ajax request to get autocomplete results with q query parameter in both the cases. It will be just input filed id which is different.

<form name="searchform" method="get" action="results.html" target="_blank">
<input type="text" id="header--serach-input" name="q" />
<input type="submit" value="Search" />
<div id="autocomplete"></div>
</form>

<form name="searchform" method="get" action="results.html" target="_blank">
<input type="text" id="footer--serach-input" name="q" />
<input type="submit" value="Search" />
<div id="autocomplete"></div>
</form>