title: Overwriting _renderItem function in jQuery autocomplete
body: <p>I'm having trouble getting jQuery autocomplete to work when overriding the <code>_renderItem</code> function.  The following code works but when I uncomment the <code>_renderItem</code> it breaks it.  Everything else seems to be working correctly until I try to add the <code>_renderItem</code> function.</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
     $(function() {
        var availableTags = [
              &lt;?php
              include ("./includes/open_database.php");
              $SQL = "CALL orders.get_inventory_2 ()";
  
              $q = mysqli_query($conn, $SQL);
              $i = 1;
  
              while ($qRow = mysqli_fetch_array($q))
              {
                  echo '{ value: "' . $qRow["part_number"] . '", label: "' . $qRow["part_number"] . '", desc: "' . $qRow["description"] . '", file: "' . $qRow["filename"] . '", vendor: "' . $qRow["name"] . '" },';
              }
  
              include ("./includes/close_database.php");
              ?&gt;
        ];
  
        function split(val) {
           return val.split(/;\s*/);
        }
  
        function extractLast(term) {
           return split(term).pop();
        }
        $("#part_numbers1")
           // don't navigate away from the field on tab when selecting an item
           .on("keydown", function(event) {
              if (event.keyCode === $.ui.keyCode.TAB &amp;&amp; $(this).autocomplete("instance").menu.active) {
                 event.preventDefault();
              }
           }).autocomplete({
              minLength: 0,
              source: function(request, response) {
                 // delegate back to autocomplete, but extract the last term
                 response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
              },
              focus: function() {
                 // prevent value inserted on focus
                 return false;
              },
              select: function(event, ui) {
                 var terms = split(this.value);
                 // remove the current input
                 terms.pop();
                 // add the selected item
                 terms.push(ui.item.value);
                 // add placeholder to get the comma-and-space at the end
                 terms.push("");
                 this.value = terms.join("; ");
                 return false;
              }
           });.data("ui-autocomplete")._renderItem = function(ul, item) {
           return $("&lt;li&gt;&lt;/li&gt;").data("item.autocomplete", item).append("&lt;a&gt;" + item.label + "&lt;br&gt;" + item.desc + "&lt;/a&gt;").appendTo(ul);
        };
     });
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>availableTags</code> variable ends up looking like this :</p>
  
  <pre><code>var availableTags = [{
     value: "",
     label: "",
     desc: "",
     file: "",
     vendor: ""
  }, {
     value: "WES504",
     label: "WES504",
     desc: "",
     file: "",
     vendor: ""
  }, {
     value: "WV057C",
     label: "WV057C",
     desc: "",
     file: "",
     vendor: ""
  }];
  </code></pre>
  
  <p>Except with about 2000 values.</p>