keyCode events with autocomplete 1

[milo3169]

Hello All,

I have been working on a Ajax auto complete for a text field I have in a form. I have been successful in getting the drop down DIV to display the suggestions, but I noticed that the keyboard commands do not work (up arrow/down arrow). I would like to be able to incorporate some keyboard commands (Escape, Enter, up & down arrows) to navigate the drop down DIV. Would anybody be able to tell me of some online tutorials that maybe able to help me with this? I've been searching, but have been unsuccessful.

Thank You in advance.

 

[BillyRayPreachersSon]

Perhaps one of these will help?

http://ajaxian.com/archives/cross-browser-keyboard-handler

http://santrajan.blogspot.com/2007/03/cross-browser-keyboard-handler.html

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[milo3169]

Hi Dan,

Thanks for the tips, but I was looking for code tutorials to help me figure out how to use for example using the up and down arrow keys after the drop list populates in the Ajax autocomplete list that I have. The keyboard commands don't seem to be working when that application is in place. I was trying to find code to teach me how to handle that situation. I hope that made better sense than my last post.

 

[ScottPrelewicz]

You would have to detect the keyprewss with an Event Listener, and do what you wanted when you detect that event. Such as highlight the div one below the current, etc. The links Dan gave you seem to be what you need, as a start, if I understand your problem. Its not copy-and-paste code in those tutorials, but should lead you in the right direction.

As an example, if you have an Auto-Complete search, and the user starts typing. The drop down shows with the auto-completed values. As an example, you'd now set up a listener for the "down arrow" key. If a keystroke on that key is detected, hightlight the first element in the auto-complete list. Then set up a listener for the enter key. If a keypress is detected, fire the search on that term.

Does this make sense? Let me know if we're all still not on the same page.

Scott Prelewicz
Web Developer
COMAND Solutions

 

[milo3169]

Thank Scott and Dan,

you both are on the right page. The more I look at those links I'm getting a better understanding. What you said is exactly what I'm trying to learn.

Thanks again.

 

[ScottPrelewicz]

Just to add, you're already listening for keystrokes in your auto-complete. So, now you just need to trap specific keystrokes and do something else than a auto-complete query.

Ex.

    if(event.keyCode==40){ [COLOR=#ff0000]// event is the keypress event, "40" is the constant for the down arrow key[/color]
       document.getElementById('autoCompleteResult1').style.background = #003399;
     }

Hope this helps some more. Please feel free to ask anything else.

Also, you might be too far into your project or maybe just want to roll your own, but if you haven't checked this out, I would suggest at least taking a look:

http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter

Scott Prelewicz
Web Developer
COMAND Solutions

 

[milo3169]

Thanks for the tip Scott, but the problem that I'm having is that the autocomplete list(DIV) are being dynamically created in my PHP script. So the IDs are being created when that PHP script runs. What I can't seem to figure out is on how to get that ID to pass it into the autocomplete function in order to use keyboard commands.

The PHP script is being run through Ajax, so the results of the DIV list are being displayed in a DIV on the "input" page. That's where I'm stumped.

Thanks Again.

Steve