JqueryUI自动完成委托与焦点使用箭头键

我正在做这个项目，它使用jqueryui在按下第一个字母时显示几个自动完成列表。
向上和向下箭头键可以用来浏览生成的列表，但我想在由jquery生成的<li>...</li>上触发focus事件。
我已经尝试了hover和mouseenter事件，它工作得很好。但是当我尝试使用focus时，它将不起作用

这是我的代码

JQuery

$(document).delegate('.ui-menu-item a', 'focus', function( event ){
    alert( event.type );
    var item_name_this = $(this).html();
    /*$.ajax({
        type : 'GET',
        url : 'process.php',
        data : 'item_name_this='+item_name_this,
        cache: false,
        success : function(results){
            $('#div1').html(results);
        }
    });*/
});

HTML

    <table cellpadding="0" cellspacing="1" width="20%" align="center" id="" border="0">
    <tr>
        <td><input type="text" name="itemname" id="itemname" value="" placeholder="Item Name" /></td>
    </tr>
    <tr>
        <td><div class="autocomplete_lists"></div></td>
    </tr>
    <tr>
        <td> 
            <table cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td>
                        <div class="item_info">
                            <table border="0" cellpadding="1" cellspacing="1" align="center" width="100%" height="100%" id="itemproperties">
                                <tr>
                                    <td width="70%">Item Name</td>
                                    <td width="30%"><span id="properties_item_name"></span></td>
                                </tr>
                                <tr>
                                    <td>Item Quantity</td>
                                    <td><span id="properties_item_qty">&nbsp;</span></td>
                                </tr>
                                <tr>
                                    <td>Item Price</td>
                                    <td><span id="properties_item_price">&nbsp;</span></td>
                                </tr>
                                <tr>
                                    <td>Item Warehouse</td>
                                    <td><span id="properties_item_warehosue">&nbsp;</span></td>
                                </tr>                                                                                                
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>        
</table>

忘了包含我的CSS，以防你想在本地尝试

.item_info{
    height:250px;
    width:100%;
    border:1px solid #CCC;
}
#itemproperties td{
    border-bottom:1px solid #999;
    border-right:1px solid #999;
}
#itemproperties td span{
    font-weight:bolder;
    font-size:22px;
}
input{
    height:28px;
}
table{
/*  border-collapse:collapse;*/
}
.autocomplete_lists{
    height:250px;
    border:1px solid #CCC;
}
enter code here

Javscript

var tags = [ "A-PLAS 800MG","B-PLAS JR","CICOF SYRUP","DBIDEC (NEW U.K)","EBSORBENT GUAZE","ABYCOLD SYR","ABYCOLD TABS","ABYTAB","BBYVITA CAP","CBYVITA SYRUP","DCCULOL EYE 0.5%","ECIDOM CAP LUEX","ECINIL ''0''SUSPENSION","FCINIL '0'SUSPENSION","ACNEGON GEL","GCRIFLAVINE LOTION","FCTIFAST CAP","FCTIFED EXPECTORANT","HCTIFED SYRUP","HCTIFED TAB", ];
$( "#itemname" ).autocomplete({
    source: function( request, response ) {
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( tags, function( item ){
                return matcher.test( item );
            }) );
        }
});

下面是一个与mouseenter事件一起工作的jsfiddle。
请帮。