jQuery UI di completamento automatico - renderItem

Question

Sto usando _renderItem modificare la lista dei risultati

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

Questo ha il comportamento di marcatura automaticamente tutto ciò che si presenta come un url come href. Mi piacerebbe fare l'intero oggetto un collegamento

in un completamento automatico vecchio che è stato fatto in questo modo:

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

ma questo non Seam di essere sostenuto più a lungo.

Qualcuno sa come posso neanche:

1) usare qualcosa di simile alla funzione .result e solo fare l'intero oggetto un link
o
2) modificare il _renderItem in modo che non è automaticamente trasformare stringhe che sembrano URL in href

Grazie.

Answer 1

Quando si specifica il completamento automatico, utilizzare la funzione di selezione per creare il tuo link:

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

Answer 2

Sembra che questo è cambiato in una versione precedente. Ora è necessario utilizzare

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

Answer 3

Un approccio migliore alla personalizzazione di completamento automatico di jQuery è quello di creare il proprio 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 
});