JqueryUI autotomplete Delegate with focus using arrow keys

Question

Im on this project that uses jqueryui to display few auto-complete list when the first letter is pressed.
The up and down arrow keys can be used to navigate through the list generated, but i want to fire a focus event on the <li>...</li> generated by jquery.
I have tried with the hover and mouseenter events and it works great. But when i try with focus, it wount work

Here's my code

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>

Forgot to include my CSS in case you'll want to try it locally

.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 );
            }) );
        }
});

Here is a jsfiddle that works with the mouseenter event.
Please Help.

Answer 1

The jQuery UI AutoComplete has it's own focus event.

$( ".selector" ).autocomplete({
  focus: function( event, ui ) {}
});

See updated jsFiddle for your scenario