jQuery用户界面自动完成 - renderItem

Question

我使用_renderItem修改结果列表

.data("autocomplete")._renderItem = function(ul, item) { 
      var temp = item.url.substring(16, item.url.length) 
      return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.value + "<br>" + item.url + "<br>" + item.description + "<br>" + "Support URL: " + item.support_url + "<br>" + "Contact: " + "<a href=" + item.contact + ">Test</a>" + "<br />" + "</a>" ) 
      .appendTo(ul) 

这有自动标记任何东西，看起来像一个URL作为一个href行为。我想使整个项目的链接

在被这样做旧的自动完成：

.result(function(event, item) { 
    location.href = item.url; 
    }); 

但这并不缝支持任何更长的时间。

有谁知道我可以：

1）使用类似的。结果功能，只是使整个项目的链接
或
2）修改_renderItem所以它是不会自动将看起来像URL的字符串转换为href的字符串

谢谢。

Answer 1

当你定义自动完成，使用select函数来创建你的链接：

$('selector').autocomplete({ 
    source: ..., 
    select: function(event, ui) { window.location = ui.url; } 
}); 

Answer 2

看来，这在以前的版本已经改变。现在，你必须使用

$element.data('uiAutocomplete')._renderItem() 

Answer 3

一种更好的方法来定制jQuery的自动完成功能是创建自己的extended version using widgets。

$.widget("custom.mySpecialAutocomplete", $.ui.autocomplete, { 
    // Add the item's value as a data attribute on the <li>. 
    _renderItem: function(ul, item) { 
    return $("<li>") 
     .attr("data-value", item.value) 
     .append($("<a>").text(item.label)) 
     .appendTo(ul); 
    }, 
    // Add a CSS class name to the odd menu items. 
    _renderMenu: function(ul, items) { 
    var that = this; 
    $.each(items, function(index, item) { 
     that._renderItemData(ul, item); 
    }); 
    $(ul).find("li:odd").addClass("odd"); 
    } 
}); 

var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
]; 

$('#myElement').mySpecialAutocomplete({ 
    source: availableTags 
});