Autocomplete hover removing autofill

I'm trying to alter the behaviour of autocomplete a little. I've got a mock up here http://jsfiddle.开发者_运维问答net/ekzMN/6/ which is producing the desired result (a la chrome address bar) - as pictured below (currently case sensitive).

The problem I'm having is when the autocomplete list is showing and I hover over the items in the list, the input value changes back to the inputted term rather than staying on the adjusted term with autofill. i.e. in the above image it would change from Hackn [ey, Eastern Cape, South Africa] to Hackn.

I guess it is a bit of default autocomplete behaviour that I need to overide but I can't work it out. I've tried focus: false and blur: false but to no avail.

Thanks.

Is this what you're trying to achieve - that the input text will change based on the hovered item? http://jsfiddle.net/ekzMN/8/ Just override the focus event:

focus: function(event, ui){
        $("#location").val(ui.item.label);
        return false;
    },

If you want the text to always be set to the first index and does not change whenever you hover on the list, you can set it to the first index of the result list.