jQuery UI Autocomplete: set active item - combobox

Question

I am trying to micmic teh behaviour of a simple HTML SELECT element with jQuery Ui Autocomplete.
Is it possible to set the active item (move focus) on the open event? Basically, I am trying to mimic the selected="selected" option from a html select element - if the value in the field matches with one from the list, make that list item 'selected'.

Answer 1

Here's a jsfiddle of what you'e looking for: http://jsfiddle.net/fordlover49/NUWJr/
Basically, took the combobox example from jquery's website, and changed the renderItem functionality. In the example off of jqueryui.com's site, change:
input.data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
};
To:
input.data("autocomplete")._renderItem = function(ul, item) {
$item = $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>");
if (this.element.val() === item.value) {
$item.addClass('ui-state-hover');
}
return $item.appendTo(ul);
};

Answer 2

You can use the focus event to add/remove the active class. I like it more than the other ._renderItem code on this thread.
[...previous autocomplete options]
focus: function( event, ui ) {
// Remove the hover class from all results
$( 'li', ui.currentTarget ).removeClass('ui-state-hover');
// Add it back in for results
$( 'li',ui.currentTarget ).filter(function(index, element) {
// Only where the element text is the same as the response item label
return $(element).text() === ui.item.label;
}).addClass('ui-state-hover');
},
[next autocomplete options...]

Answer 3

Well, I finally figured out the answer with the help of a friend.
$('input[data-field=vat_rate]', view.el).autocomplete({
source: function (request, response) {
response(your_source_array);
},
minLength: 0,
open: function (event, ui) {
var term = ui.item.value;
if (typeof term !== 'undefined') {
$(this).data("autocomplete").menu.activate(new $.Event("mouseover"), $('li[data-id=' + term + ']'));
}
}
}).click(function () {
if ($(this).autocomplete('widget').is(':visible')) {
$(this).autocomplete('close');
} else {
$(this).autocomplete('search');
}
}).data("autocomplete")._renderItem = function (ul, item) {
var listItem = $("<li></li>")
.data("item.autocomplete", item)
.attr("data-id", item.id)
.append('<a>' + item.label + '</a>')
.appendTo(ul);
};
Here's the JSBin for it: http://jsbin.com/unibod/2/edit#javascript
Works perfect! :)