How to modify this jquery?

Question

I have got a script for suggestion box. Its working great but problem with this I want to modify it for upkey and downkey event. Its just giving suggestion even not working for mouse click event.

function lookup(inputString) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else {
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup

function fill(thisValue) {
    $('#inputString').val(thisValue);
    setTimeout("$('#suggestions').hide();", 50);
}

HTML

<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList"> &nbsp; </div>

As I am new with jquery, may I have idea how to modify it further for mouse click or keyboard arrow keys.

Answer 1

Why reinvent the wheel - have you looked at jquery ui autocomplete? http://jqueryui.com/demos/autocomplete/

Answer 2

I think this may help you with keyboard arrow keys (register key event handling)

// Handling keybinding keydown.
$(document).keydown(function(e){
        switch(e.keyCode){
            case 38: //this is (UP) pressed down
            // do the action you want.
                break;
        }
});

// Handling keybinding keyup.
$(document).keyup(function(e){
        switch(e.keyCode){
            case 38: //this is (UP) pressed down
            // do the action you want.
                break;
        }
});

this link will help you with the keycode:

http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/javascript-char-codes-key-codes.aspx