Как в Jquery UI autocomplete при ajax json запросах результаты оформить в html?

Question

[Fyodor]

В общем хочу результаты выдачи оформить, но не могу додуматься как. Пробовал прям в json добавлять html, но они преобразуются тогда.

<li class="ui-menu-item" role="presentation">
          <a id="ui-id-12" class="ui-corner-all" tabindex="-1">Прага, Чехия &lt;span&gt;1376&lt;/span&gt; </a></li>

нужно же чтобы вот так было

<li class="ui-menu-item" role="presentation">
   <a id="ui-id-22" class="ui-corner-all" tabindex="-1">
                        <span class="ui-menu-item-text">Прага</span>
                        <span class="ui-menu-item-clar">, Чехия</span>
                        <span class="ui-menu-item-comment">1377 отелей</span>
    </a>
</li>

Сейчас autocomplete подключается так

$("#hotelcityto").autocomplete({
                                            source: "search.php",
...

так подозреваю что это в скрипте autocomplete нужно поколдовать чтобы он разбирал ответ и раскладывал в spanы соответствующие

Answer 1

[Fyodor]

$("#hotelcityto").autocomplete({
                                           source: "search.php"}).autocomplete( "instance" )._renderItem = function(ul, item) {
                                            return $("<li></li>")
                                                    .data("item.autocomplete", item)
                                                    .append("<a><strong class='ui-item-name'>" + item.label + "</strong>, <span class='ui-item-country'>" + item.country + "</span>"+ (item.state ? ", " + item.state : "") +" <span class='ui-item-kolvo'>" + item.kolvo + "</span></a>")
                                                    .appendTo(ul);
                                        };

для версии UI 1.11 такой код подошел. причем в 1.10 он не работает и у меня не получилось разобраться почему.

Answer 2

[Александр N++]

$("#myTextField").autocomplete({
...
source: function( request ) {    // Define source for AC data
  ..
  $.ajax({                              // Make Ajax call for AC data
   ...
   success: function( data ) {  // AC data returns
     responseArray = $.map( data, function(item) {    // build an array of hashmaps
                 ..         
                 return { label: item, customHTML: "<b>"+item+"</b>", classN: "someClassName"};           // "label" is inserted into text field when user selects it.
       });
      return responseArray;
   }
}}

Comments

[Fyodor]

Вы сами это проверяли?