JQuery UI Autocomplete: установить активный элемент

Question

Я пытаюсь изменить поведение простого элемента HTML SELECT с помощью jQuery Ui Autocomplete.

Можно ли установить активный элемент (переместить фокус) на событие открытия?По сути, я пытаюсь имитировать параметр selected = "selected" из HTML-элемента select - если значение в поле совпадает со значением в списке, сделайте этот элемент списка «selected».

Answer 1

Вот jsfiddle из того, что вы ищете: http://jsfiddle.net/fordlover49/NUWJr/

По сути, взял пример со списком с веб-сайта jquery и изменил функциональность renderItem.В примере с сайта jqueryui.com измените:

   input.data("autocomplete")._renderItem = function(ul, item) {
                return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
   };

На:

   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

Вы можете использовать событие focus для добавления / удаления активного класса. Мне нравится больше, чем другой ._renderItem код в этой теме.

[...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

Ну, я наконец-то понял ответ с помощью друга.

$('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);
};

Вот для этого JSBin: http://jsbin.com/unibod/2/edit#javascript

Работает отлично! :)