Alex Rivera | Logout

How do I create a suggestion drop-down list like Google's?

Asked 2011-05-29T18:41:52.747
9

It's a theoretical question at this point in time, but something I'm probably going to want to do long-term.

When you go to google.com and start typing a search, it'll provide you with suggestions in a little drop down menu. I'm reasonably certain that they use AJAX to send what you've typed and get a list of possible suggestions back. What I'm trying to figure out is how they actually display that list. It looks like a simple <select> drop down list, just without the actual select box at the top. There is zero doubt in my mind that it's something as stupidly simple as a CSS trick that divides the select box from drop-down list it produces or an input type other than select, but I'm drawing a blank.

javascript ajax
Edit
Report

1 Answer

6

You can use jQuery AutoComplete -

The idea is that you fire a JavaScript event onKeyUp. This event should post an ajax request containing the current value of the input you are writing on.

From there the PHP checks the database for the keyword you written, and if it is it returns the results back to the JavaScript.

JS checks the result of the ajax request and fills anything returned from ajax into an absolute positioned select.

The absolute positioned select has an onClick event that fills the clicked value from the select into the text input you are writting to.

Excuse my English, but I'm trying hard to explain.

answered 2011-05-29T19:06:59.540

Your Answer