Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Search and Promote autocomplete

Avatar

Avatar
Validate 10
Level 3
kishore_polsani
Level 3

Likes

11 likes

Total Posts

77 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
kishore_polsani
Level 3

Likes

11 likes

Total Posts

77 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
kishore_polsani
Level 3

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)

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,129 likes

Total Posts

6,140 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,129 likes

Total Posts

6,140 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
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)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,153 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,153 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

18-05-2020

hi,

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