Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to keyboard down or up between dropdown "options"?

I have a custom built ajax [div] based dynamic dropdown.

I have an [input] box which; onkeyup, runs an Ajax search which returns results in divs and are drawn back in using innerHTML. These divs all have highlights onmouseover so, a typical successful search yields the following structure (pardon the semi-code):

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

It works.

However, I'm missing the important functions behind regular HTML elements. I can't keyboard down or up between "options".

I know javascript handles keyboard events but; I haven't been able to find a good guide. (Of course, the follow-up question will end up being: can I use <ENTER> to trigger that onclick event?)

like image 416
mauriciopastrana Avatar asked Aug 07 '08 15:08

mauriciopastrana


People also ask

How do you select options with keyboard?

Hold down the "Ctrl" key and the "Shift" key. Press the right arrow key to select the word to the right, or press the left arrow key to select the word to the left. Select one character at a time by holding down the "Shift" key and and using either arrow key (right or left).

Which is the shortcut key for drop-down list box?

Alt+Down Arrow is the keyboard shortcut to open the drop down menu.

How do I filter a drop-down list in Excel with keyboard?

Example #2 – Opening the Drop-down Filter Menu in Excel We must first select a cell in the header row. As we can see, every cell contains a drop-down icon like the image. Then, press the “ALT + down arrow key” on the keyboard to open the “Filter” menu like the below screenshot.


2 Answers

What you need to do is attach event listeners to the div with id="results". You can do this by adding onkeyup, onkeydown, etc. attributes to the div when you create it or you can attach these using JavaScript.

My recommendation would be that you use an AJAX library like YUI, jQuery, Prototype, etc. for two reasons:

  1. It sounds like you are trying to create an Auto Complete control which is something most AJAX libaries should provide. If you can use an existing component you'll save yourself a lot of time.
  2. Even if you don't want to use the control provided by a library, all libraries provide event libraries that help to hide the differences between the event APIs provided by different browsers.

Forget addEvent, use Yahoo!’s Event Utility provides a good summary of what an event library should provide for you. I'm pretty sure that the event libraries provided by jQuery, Prototype, et. al. provide similar features.

If that article goes over your head have a look at this documentation first and then re-read the original article (I found the article made much more sense after I'd used the event library).

A couple of other things:

  • Using JavaScript gives you much more control than writing onkeyup etc. attributes into your HTML. Unless you want to do something really simple I would use JavaScript.
  • If you write your own code to handle keyboard events a good key code reference is really handy.
like image 150
Walter Rumsby Avatar answered Oct 13 '22 21:10

Walter Rumsby


Off the top of my head, I would think that you'd need to maintain some form of a data structure in the JavaScript that reflects the items in the current dropdown list. You'd also need a reference to the currently active/selected item.

Each time keyup or keydown is fired, update the reference to the active/selected item in the data structure. To provide highlighting information on the UI, add or remove a class name that is styled via CSS based on if the item is active/selected or not.

Also, this isn't a biggy, but innerHTML is not really standard (look into createTextNode(), createElement(), and appendChild() for standard ways of creating data). You may also want to see about attaching event handlers in the JavaScript rather than doing so in an HTML attribute.

like image 42
Tom Avatar answered Oct 13 '22 21:10

Tom