Search and Promote autocomplete | Community
Skip to main content
kishore_polsani
kishore_polsani
Level 4
May 18, 2020
Solved

Search and Promote autocomplete

  • May 18, 2020
  • 2 replies
  • 5357 views

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.
Best answer by kautuk_sahni

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>

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
May 18, 2020

hi,

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

Arun Patidar
    kishore_polsani
    kishore_polsaniAuthor
    Level 4
    May 18, 2020
    This is a custom component.
    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity ManagerAccepted solution
    Community Manager
    June 25, 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>

    Kautuk Sahni
    Terms & ConditionsAccessibility statement

    Loading footer...