JQuery UI автозаполнение - 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 в качестве ссылки. Я хотел бы сделать весь элемент ссылкой

в старом автозаполнении, которое было сделано так:

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

Но этот шов больше не поддерживается.

Кто-нибудь знает, как я могу:

1) использовать что-то похожее на функцию .result и просто сделать весь элемент ссылкой
или
2) измените _renderItem, чтобы он не превращал строки, которые выглядят как URL, в href's

Спасибо.

Answer 1

Кажется, что это изменилось в предыдущей версии.Теперь вы должны использовать

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

Answer 2

Лучший подход к настройке автозаполнения jQuery - создать собственную расширенную версию с использованием виджетов .

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

Answer 3

Когда вы определяете автозаполнение, используйте функцию выбора, чтобы создать ссылку:

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