• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 969
  • Last Modified:

Google suggest dropdown


I'm trying to replicate the Google suggest box, and have all the ajax and php code working.  What I'm missing right now is the ability to select one of the options and the proper formatting of the options.

I've seen others attempts at it,but really I like the way Google and Yahoo maps do their suggestions, with moving with arrow keys and highlighting.

Anybody know how they do it? is it a table?  How do the arrow keys work?

  • 2
  • 2
2 Solutions
They use a hidden table with data being grabbed as JavaScript.
So, what happens is, they grab the data and populate the table.  Then they show the table.

Depending on what you choose, they change the class .gac_b, which has a css style that makes it look highlighted.

The arrow keys are keypress binding, that calls the selection function.
You want to bind keypress (of the input box) and move mouse (of the table) to call the selection function.
Bind mouse click to start a search.

var selectnum = 0;  //current selected item
var selectmax = 10; //number of items
function updown(e){
  var c=e.keyCode;
  if(c==38||c==40){selectnum++; selectnum %= max; selectit(selectnum); return false}
function selectit(num){
  selectnum = num;
  //modify input box to display data
  //get table row and modify css style or to class with css style
//onload, get the input element and bind keypress to updown
//element.onkeypress = updown;
//bind mouse move (of table) to select item hovered
//bind mouse click (of table) on the table to start a search

Open in new window

NerdsOfTechTechnology ScientistCommented:
NerdsOfTechTechnology ScientistCommented:
ugebAuthor Commented:
Thank you both.  I'll try these out.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now