1 Reply Latest reply: Aug 4, 2014 7:59 AM by KaustavBanerjee

Search box with dropdown display of results

Jim Layher Oct 1, 2013 11:40 AM

I'm looking to modify the Search module functionality (or create a web app?) that is used in sites like help.adobe.com . I would like the search function to work like this... As a person types in a search term, a dropdown box shows results that match the text as it is typed in letter by letter. A person can then click one of the displayed results at any time or click a search icon to see the page of all matching results.

I've looked around the forum to see if somebody has done this already but can't see that they have. I assume a Javascript at a minimum might be required (not a developer myself). Anybody familiar with how to accomplish that?

1. Re: Search box with dropdown display of results

KaustavBanerjee Aug 4, 2014 7:59 AM (in response to Jim Layher)

Hi,

You are trying to implement auto complete for a text input element. This can achieved best with the use of the JQueryUI autocomplete. Here's a complete tutorial to implement this JQuery function - JQueryUI autocomplete full tutorial and demo

This function can create suggestions based on the user's input. These suggestions can be a list of words you create or can be fetched from a database. You'll find source codes and demo also for all of this on the above link.

Also, if you want a Facebook style suggestion drop down, try this - Search prediction based on user input
But this does not allow keyboard navigation in the drop down. you would have to select using a mouse pointer
Like Show 0 Likes (0)

Actions

Legend

Correct Answers - 10 points