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
  • 5362 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
    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    May 18, 2020

    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>

    Arun Patidar
    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...