jquery: arrow up/down keys in input tag change selected <select> item
<p>I know there are hundreds of similar questions out there, and believe me when I
say I've read a lot of them, but still the problem remains. If I have an input
tag id="input1" and a select id="list1", I want the up/down arrow keys when
pressed in the input component to move the selected option in the select list
up or down accordingly.</p>

<p>I've set the value of the select tag so that the first item in the options list
is selected, but this code doesn't work. I've checked that the bind for the
keydown event is working ok, and I've tried setting focus temporarily to the
select before triggering a keyup/keydown/keypress (all tried) event on the
select component. Should I perhaps be focusing on the select component and then
triggering a select or change event before triggering the keypress event?</p>

<pre><code>        deflectEvent = function(event) {
            if((event.which == $.ui.keyCode.UP) ||
              (event.which == $.ui.keyCode.DOWN)) {
                //$('#list1').focus(); //.focus().click();
                $('#list1').trigger(event);
                //$('#input1').focus();
                return false;
            };
        }
        jQuery(function($){$('#input1').bind('keydown',deflectEvent)});
</code></pre>

<p>What I observe happening, is errrm, nothing. On IE8 I can press an arrow key and get the 
focus to shift using $('#list1').focus().focus().click(); but on chrome I can't even do 
this.</p>

<p>I'm aware of the jquery simulate plugin, although I've not managed to track
down any examples of it's use. For example, if you simulate a keypress event,
how do you specify which key was pressed?</p>

<p>Thanks.</p>
