Jquery UI autocomplétion Ajax JSONP retour est rompu dans JQ UI Version 1.8.6

Question

J'ai utilisé le code ci-dessous pour mon auto-complète sur mon formulaire pendant un certain temps, mais après la mise à jour jquery ui à la version 1.8.6 de 1.8rc3 il a cassé le formatage du retour JSONP. Les données retournées ne sont plus formatées html, mais à la place c'est une chaîne. Des idées?

Mise à jour: JS Fiddle inclus, en utilisant la jquery ui démo et html dans les données

http://jsfiddle.net/blowsie/ejLPg/

$("#companyname").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: turl, 
       dataType: "jsonp", 
       data: { 
        maxRows: 9, 
        name_startsWith: request.term 
       }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: "<span class='ui-menu-item-title'>" + item.name.toLowerCase() + "</span><span class='ui-menu-item-subtitle'>" + item.address1.toLowerCase() + '&nbsp;' + item.post_code.toLowerCase() + '</span>', 
          value: item.name_id 
         } 
        })) 
       } 
      }) 
     }, 
     minLength: 3, 
     delay: 50, 
     select: function (event, ui) { 
      LoadGivenCompany(ui.item.value); 
     }, 
     open: function() { 
      $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
      $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     }, 
     focus: function() { return false } 
    }); 

Merci à l'avance

Answer 1

Transforme en utilisant le .data(), après la saisie semi-automatique vous permet de formater les données

$(function() { 
function log(message) { 
    $("<div/>").text(message).prependTo("#log"); 
    $("#log").attr("scrollTop", 0); 
} 

$("#city").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "http://ws.geonames.org/searchJSON", 
      dataType: "jsonp", 
      data: { 
       featureClass: "P", 
       style: "full", 
       maxRows: 12, 
       name_startsWith: request.term 
      }, 
      success: function(data) { 
       response($.map(data.geonames, function(item) { 
        return { 
         label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
         value: item.name, 
         test: 'hahahah' 
        } 
       })); 
      } 
     }); 
    }, 
    minLength: 2, 
    select: function(event, ui) { 
     log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); 
    }, 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    } 
})  
.data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br>" + item.test + "</a>") 
      .appendTo(ul); 
    }; 
}); 

http://jsfiddle.net/blowsie/ejLPg/3

Answer 2

Je regardais dans la code source de saisie semi-automatique de la version 1.8.6 et découvert que l'objet cre ation utilise la méthode text au lieu de la méthode html. Ils suggèrent à jQuery.ui de changer de style en utilisant le rouleau de thème en modifiant les classes spécifiques au widget dans le fichier css. Voir Autocomplete#theming.

Ce que je ferais est de trouver l'endroit où ils poussent le texte dans l'élément et changer la méthode de rappel en HTML et le tester.