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

Question

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

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

Answer 1

好了，我终于想通了，在朋友的帮助下答案。

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

这里是什么you'e寻找的jsfiddle：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 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...]