Solved

Google suggest dropdown

Posted on 2008-10-25
5
965 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22804126
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
ID: 22804218
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
ID: 22805428
0
 
LVL 19

Accepted Solution

by:
NerdsOfTech earned 400 total points
ID: 22805431
0
 
LVL 11

Author Closing Comment

by:ugeb
ID: 31597330
Thank you both.  I'll try these out.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 61
Json and ajax 1 22
javascript and jquery question 4 26
Put javascript to get dropdown value 3 22
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

733 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