Search and Promote autocomplete | Community
Skip to main content
kishore_polsani
kishore_polsani
Level 4
May 18, 2020 7:16 PM UTC
Solved

Search and Promote autocomplete

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
kautuk_sahni
kautuk_sahniAccepted solution
Employee
Jun 25, 2020 12:09 PM UTC

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>

Kautuk Sahni
View reply

4 replies

kautuk_sahni
kautuk_sahniAccepted solution
Employee
Jun 25, 2020 12:09 PM UTC

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>

Translate
Kautuk Sahni
arunpatidar
arunpatidar
New Participant
May 18, 2020 7:46 PM UTC

hi,

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

Translate
Arun Patidar
    kishore_polsani
    kishore_polsaniAuthor
    Level 4
    May 18, 2020 8:03 PM UTC
    This is a custom component.
    Translate
    Terms & ConditionsAccessibility statement

    Loading footer...