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

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! 🙂