title: jQuery Autocomplete with custom renderer throwing "Cannot read property 'value' of undefined"
body: <p>I'd like to display the suggestions in a table, it works but throws a JS error when hovering over the static table header. How do I fix this? It works perfectly otherwise.</p>
  
  <p><a href="https://i.stack.imgur.com/6apTH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6apTH.png" alt="enter image description here"></a></p>
  
  <p><strong>Error Steps:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/zlOyv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zlOyv.gif" alt="enter image description here"></a></p>
  
  <p><em>Note: it used to work in jquery 1.10.4 but throws error when I tried upgrading to 1.12.4</em></p>
  
  <p><strong>Working version</strong> <strong>(on 1.10.4):</strong> <a href="https://jsfiddle.net/sajjansarkar/bq526h67/1/" rel="nofollow noreferrer">https://jsfiddle.net/sajjansarkar/bq526h67/1/</a></p>
  
  <p><strong>Version throwing error</strong> <strong>(on 1.12.4):</strong> <a href="https://jsfiddle.net/sajjansarkar/L52u064j/2/" rel="nofollow noreferrer">https://jsfiddle.net/sajjansarkar/L52u064j/2/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="project-label"&gt;Select a project (type "s" for a start):&lt;/div&gt;
  &lt;input id="project"&gt;
  &lt;input type="hidden" id="project-id"&gt;
  &lt;p id="project-description"&gt;&lt;/p&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function() {
    //random json values
    var projects =  [{ id: 1, value: "Thomas", cp: 134 }, { id: 65, value: "Richard", cp: 1743 }, { id: 235, value: "Harold", cp: 7342 }, { id: 78, value: "Santa Maria", cp: 787 }, { id: 75, value: "Gunner", cp: 788 }, { id: 124, value: "Shad", cp: 124 }, { id: 1233, value: "Aziz", cp: 3544 }, { id: 244, value: "Buet", cp: 7847 }];
  
  
  
    // define UI behavior methods
  
    function _renderMenu(ul, items) {
      var self = this;
      //table definitions
      ul.append("&lt;table border=1&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;ID#&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Cool&amp;nbsp;Points&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt;");
      $.each(items, function(index, item) {
        self._renderItemData(ul, ul.find("table tbody"), item);
      });
    }
  
    function _renderItemData(ul, table, item) {
      return this._renderItem(table, item).data("ui-autocomplete-item", item);
    };
  
    function _renderItem(table, item) {
      return $("&lt;tr class='ui-menu-item' role='presentation'&gt;&lt;/tr&gt;")
        //.data( "item.autocomplete", item )
        .append("&lt;td &gt;" + item.id + "&lt;/td&gt;" + "&lt;td&gt;" + item.value + "&lt;/td&gt;" + "&lt;td&gt;" + item.cp + "&lt;/td&gt;")
        .appendTo(table);
    };
  
  
  
    // create the autocomplete
    var autocomplete = $("#project").autocomplete({
      minLength: 1,
      source: projects
    });
  
    // get a handle on it's UI view
    var autocomplete_handle = autocomplete.data("ui-autocomplete");
  
    //overriding jquery-ui.autocomplete .js functions
    autocomplete_handle._renderMenu = _renderMenu;
    autocomplete_handle._renderItemData = _renderItemData;
    autocomplete_handle._renderItem = _renderItem;
  
  });
  </code></pre>