title: jQuery autocomplete with categories, selection and focus not working and list format incorrect
body: <p>I'm having a h... of a time figuring out why my <strong>jQuery autocomplete</strong> with categories and formatted results is not working. I've gone through a bunch of the similar questions on SO and tried every suggestion that I could find, but nothing seems to be working.</p>
  
  <p>While the display is correct, it is not appending the list items to the top ul. It adds one, and then each subsequent result is appended to the same list item. This means that focus and selection methods do not work as intended.</p>
  
  <p><strong>I've tried:</strong></p>
  
  <ul>
  <li><code>_renderItemData(ul, item)</code> vs. <code>_renderItem(ul, item)</code></li>
  <li>With and without the <code>.data("item.autocomplete", item)</code> in <code>renderItem()</code></li>
  <li>Appending <code>.data("item.autocomplete", {})</code> to the <code>ul.append</code> in the
  renderMenu method</li>
  <li>Changing the class used in the category list item.</li>
  </ul>
  
  <p>Any help would be appreciated. Thanks!</p>
  
  <p>Here's the full code and the <a href="http://jsfiddle.net/4dJev/2/" rel="nofollow">fiddle</a>:</p>
  
  <pre><code>$(function () {
    function format(item) {
      var cell = '';
  
      $.each(item.value, function(index, value) {
        cell += "&lt;a class='ui-autocomplete-thumbnail-link' href='" + value.url + "'&gt;";
  
        cell += "&lt;img class='ui-autocomplete-thumbnail-image' src='" + value.images.small + "' /&gt;";
  
        cell += value.presentation + "&lt;/a&gt;";
      });
  
      return cell;
    }
  
    $.widget( "custom.categorycomplete", $.ui.autocomplete, {
      _renderMenu: function(ul, items) {
        var self = this, current_category = '';
  
        $.each(items, function(index, item) {
          if (item.label !== current_category) {
            current_category = item.label;
            ul.append($("&lt;li class='ui-category'&gt;" + current_category + "&lt;/li&gt;").data("item.autocomplete", {}));
          }
  
          self._renderItem(ul, item);
        });
      }
    });
  
  var    jsondata = [
      {
          "value": [
              {
                  "id": 1,
                  "name": "category1-name1",
                  "presentation": "category1-presentation1",
                  "url": "example.com/category1-url1",
                  "images": {
                      "small": "http://sipi.usc.edu/database/preview/misc/4.1.07.png"
                  }
              },
              {
                  "id": 2,
                  "name": "category1-name2",
                  "presentation": "category1-presentation2",
                  "url": "example.com/category1-url2",
                  "images": {
                      "small": "http://sipi.usc.edu/database/preview/misc/4.1.08.png"
                  }
              }
          ],
          "label": "category1"
      },
      {
          "value": [
              {
                  "id": 3,
                  "name": "category2-name1",
                  "presentation": "category2-presentation1",
                  "url": "example.com/category2-url1",
                  "images": {
                      "small": "http://sipi.usc.edu/database/preview/misc/4.1.01.png"
                  }
              },
              {
                  "id": 4,
                  "name": "category2-name2",
                  "presentation": "category2-presentation2",
                  "url": "example.com/category2-url2",
                  "images": {
                      "small": "http://sipi.usc.edu/database/preview/misc/4.1.03.png"
                  }
              }
          ],
          "label": "category2"
      }
  ];
  
    $('#s1').categorycomplete({
      source: jsondata,
      select: function (event, ui) {
        window.location.href = ui.item.value[0].url.replace(window.location.host, '');
  
        return false;
      }
    })
    .data( "categorycomplete" )._renderItem = function( ul, item ) {
      return $( "&lt;li&gt;" )
      .data("item.autocomplete", item)
      .append(format(item))
      .appendTo(ul);
    };
  });
  </code></pre>