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

Question

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.

Answer 1

okay, so you got multiple posibilities, you can use a select dropdown and draw it exactly underneath the input typed text, which is ment for typing in the keyword. Off course in CSS it needs to be absolute positioned with a lower z-index than the input for text.

the other, more complex example is that you a draw a unordered list which is styled like a dropdown. If you use this one, you can for example also load images (icons) with the ordinary text suggestion. For this example you need to position the ul beneath the input for text, create css hover effects for currently selected il and create click event on each il, which fills up the text input with clicked keyword and hides the unordered list.

I hope that explains your question.