How do I keyboard down or up between drop-down "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 div
s and are drawn back in using innerHTML
. These div
s 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?)
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:
- 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.
- 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 (developer yahoo yui event) 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.
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.
Http Auth in a Firefox bookmarklet
Http Auth in a Firefox bookmarklet I'm trying to create a bookmarklet for posting del_icio_us bookmarks to a separate account. I tested it from the command line like: wget -O - --no-check-certificate \ "https_seconduser:thepassword@api_del_icio_us/v1/posts/add?url=http_seet_dk&description=test" This works great. I then wanted to create a bookmarklet in my firefox. I googled and found bits and pieces and ended up with: javascript:void( open('https_seconduser:password@api_del_icio_us/v1/posts/add?url=' +encodeURIComponent(location.href) +'&description='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=500,height=250' ) ); But all that happens is that I get this from del_icio_us: <?xml version="1.0" standalone="yes"?> <result code="access denied" /> <!-- fe04_api_del_ac4_yahoo_net uncompressed/chunked Thu Aug…
How can I turn a string of HTML into a DOM object in a FF extension?
How can I turn a string of HTML into a DOM object in a Firefox extension? I'm downloading a web page (tag soup HTML) with XMLHttpRequest and I want to take the output and turn it into a DOM object that I can then run XPATH queries on. How do I convert from a string into DOM object? It appears that the general solution is to create a hidden iframe and throw the contents of the string into that. There has been talk of updating DOMParser to support text/html but as of Firefox 3.0.1 you still get an NS_ERROR_NOT_IMPLEMENTED if you try. Is there any option besides using the hidden iframe trick? And if not, what is the best way to do the iframe trick…
Call ASP . NET function from JavaScript?
I'm writing a web page in ASP . NET. I have some JavaScript code, and I have a submit button with a click event. Is it possible to call a method I created in ASP with JavaScript's click event? You should be using some Ajax library like : Anthem 20 Answers Well, if you don't want to do it using Ajax or any other way and just want a normal ASP . NET postback to happen, here is how you do it (without using any other libraries): It is a little tricky though... :) i. In your code file…