Autocomplete UI

Autocomplete UI

I am using JQuery UI 1.8.2. I want to create an auto-complete functionality like the Single City textbox.

Once the drop down menu comes, the first list item should be selected. On pressing the enter key, the textfield should be populated. And at the same time, autocomplete feature should be called if the user presses the delete key or the backspace buttons.I tried to use selectFirst: true by including a plugin available on github, developed by Scott González.

Code:
(function( $ ) {

$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {
    var autocomplete = $( this ).data( "autocomplete" ),
        menu = autocomplete.menu;

    if ( !autocomplete.options.selectFirst ) {
        return;
    }

    menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
});

}( jQuery ));


But it is causing two issues:

1) The textbox is automatically populated with the first item of the drop down.
2) The call to the autocomplete feature is getting overridden by selectFirst option. Hence, whenever the user presses the backspace key the first item is selected and input box is populated.

What could be a solution?