StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<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> <p>My recommendation would be that you use an AJAX library like <a href="http://developer.yahoo.com/yui/" rel="nofollow noreferrer">YUI</a>, <a href="http://jquery.com/" rel="nofollow noreferrer">jQuery</a>, <a href="http://www.prototypejs.org/" rel="nofollow noreferrer">Prototype</a>, etc. for two reasons:</p> <ol> <li>It sounds like you are trying to create an <a href="http://developer.yahoo.com/ypatterns/pattern.php?pattern=autocomplete" rel="nofollow 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> <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> </ol> <p><a href="http://www.dustindiaz.com/yahoo-event-utility/" rel="nofollow 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> <p>If that article goes over your head have a look at <a href="http://developer.yahoo.com/yui/event/index.html" rel="nofollow 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> <p>A couple of other things:</p> <ul> <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> <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="nofollow noreferrer">good key code reference</a> is really handy.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload