Solved

Google suggest dropdown

Posted on 2008-10-25
5
960 Views
Last Modified: 2013-11-19
Hi,

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?

Thanks!
0
Comment
Question by:ugeb
  • 2
  • 2
5 Comments
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
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.
0
 
LVL 16

Assisted Solution

by:sh0e
sh0e earned 100 total points
Comment Utility
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

0
 
LVL 19

Expert Comment

by:NerdsOfTech
Comment Utility
0
 
LVL 19

Accepted Solution

by:
NerdsOfTech earned 400 total points
Comment Utility
0
 
LVL 11

Author Closing Comment

by:ugeb
Comment Utility
Thank you both.  I'll try these out.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now