<p>I have a custom built ajax [div] based dynamic dropdown. </p>

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

<pre><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]
</code></pre>

<p>It works.</p>

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

<p>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 <code>&lt;ENTER&gt;</code> to trigger that <code>onclick</code> event?)</p>

[{'answer_id': 4897, 'author': 'Tom', 'author_id': 20, 'author_profile': 'https://Stackoverflow.com/users/20', 'pm_score': 1, 'selected': False, 'text': "<p>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. </p>\n\n<p>Each time <code>keyup</code> or <code>keydown</code> 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.</p>\n\n<p>Also, this isn't a biggy, but <code>innerHTML</code> is not really standard (look into <code>createTextNode()</code>, <code>createElement()</code>, and <code>appendChild()</code> 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.</p>\n"}, {'answer_id': 13918, 'author': 'Walter Rumsby', 'author_id': 1654, 'author_profile': 'https://Stackoverflow.com/users/1654', 'pm_score': 4, 'selected': True, 'text': '<p>What you need to do is attach event listeners to the <code>div</code> with <code>id="results"</code>. You can do this by adding <code>onkeyup</code>, <code>onkeydown</code>, etc. attributes to the <code>div</code> when you create it or you can attach these using JavaScript.</p>\n\n<p>My recommendation would be that you use an AJAX library like <a href="http://developer.yahoo.com/yui/" rel="noreferrer">YUI</a>, <a href="http://jquery.com/" rel="noreferrer">jQuery</a>, <a href="http://www.prototypejs.org/" rel="noreferrer">Prototype</a>, etc. for two reasons:</p>\n\n<ol>\n<li>It sounds like you are trying to create an <a href="http://developer.yahoo.com/ypatterns/pattern.php?pattern=autocomplete" rel="noreferrer">Auto Complete</a> control which is something most AJAX libaries should provide. If you can use an existing component you\'ll save yourself a lot of time.</li>\n<li>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.</li>\n</ol>\n\n<p><a href="http://www.dustindiaz.com/yahoo-event-utility/" rel="noreferrer">Forget addEvent, use Yahoo!’s Event Utility</a> 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. </p>\n\n<p>If that article goes over your head have a look at <a href="http://developer.yahoo.com/yui/event/index.html" rel="noreferrer">this documentation</a> first and then re-read the original article (I found the article made much more sense after I\'d used the event library).</p>\n\n<p>A couple of other things:</p>\n\n<ul>\n<li>Using JavaScript gives you much more control than writing <code>onkeyup</code> etc. attributes into your HTML. Unless you want to do something <em>really simple</em> I would use JavaScript.</li>\n<li>If you write your own code to handle keyboard events a <a href="http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx" rel="noreferrer">good key code reference</a> is really handy.</li>\n</ul>\n'}]
['https://Stackoverflow.com/questions/4884', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/547/']