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 
});