Question

我正在尝试使用jQuery Ui自动完成功能来简化HTML SELECT元素的行为。

是否可以在公开活动中设置活动项目（移动焦点）？基本上，我试图模仿html选择元素中的selected =“selected”选项 - 如果字段中的值与列表中的值匹配，则使该列表项“选中”。

Answer 1

以下是您正在寻找的内容：http://jsfiddle.net/fordlover49/NUWJr/

基本上，从jquery的网站上获取了combobox example，并更改了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

好吧，我终于在朋友的帮助下找到了答案。

$('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

完美的作品！：）

Answer 3

您可以使用the focus event添加/删除活动类。我比这个帖子中的其他._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...]

jQuery UI自动完成：设置活动项

3 个答案: