2010-12-06 1 views
1

Я использовал код ниже для моих автозавершений в моей форме на некоторое время, но после обновления jquery ui до версии 1.8.6 от 1.8rc3 это нарушил форматирование возврата JSONP. Возвращенные данные больше не форматируются html, а вместо этого это строка. Есть идеи?JQuery UI Autocomplete Возврат AJAX JSONP нарушен в JQ UI Version 1.8.6

Update: JS Fiddle включены, используя JQuery щ демо и HTML в данных

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

alt text

Заранее спасибо

ответ

1

Оказывается, с помощью .data(), после того, как автозаполнение позволяет форматировать данные

$(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

1

Я посмотрел в исходный код автозаполнения версии 1.8.6 и выяснил, что элемент cre ation использует текстовый метод вместо html-метода. Они предлагают в jQuery.ui изменить стиль с помощью ролика темы, изменив классы виджета в файле css. См. Autocomplete#theming.

Что бы я хотел сделать, это найти место, которое они нажимают на текст в элементе, и изменить метод вызова обратно на html и проверить его.

+0

тот довольно хороший совет спасибо, Altough я думаю, что может Aswell откатить версию JQuery , я просто подумал, что могу что-то сделать неправильно, я удивлен, что не могу найти кого-то еще с той же проблемой. – Blowsie

 Смежные вопросы

  • Нет связанных вопросов^_^