Search and Promote autocomplete

kishore_polsani

18-05-2020

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>

Search and Promote

Accepted Solutions (1)

Accepted Solutions (1)

kautuk_sahni

Community Manager

25-06-2020

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>

Answers (1)

Answers (1)

Arun_Patidar

MVP

18-05-2020

hi,

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