title: jquery-ui-autocomplete - Overriding _renderMenu and _renderItem
body: <p>I have implemented an autocomplete using jquery-ui. I want to limit the number of items shown to 10 and each item custom formatted. Here is the code</p>
  
  <pre><code>$("#text1").autocomplete({
    minLength: 2,
    source: function (request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i")
    , results = [];
    $.each(source, function (i, value) {
      if (matcher.test(value.value) &amp;&amp; $.inArray(value.label, results) &lt; 0) {
      results.push(value.label);
      }
     });
  
    response(results);
    }
   }).data("autocomplete")
        ._renderMenu = function(ul, items) {
          var self = this;
          $.each(items, function (index, item) {
              if (index &lt; 10) {
                $.ui.autocomplete.prototype._renderItem = function(ul, item) {
                  var re = new RegExp("^" + this.term, "i");
                  var t = item.label.replace(re, "&lt;span style='font-weight:bold;color: Blue;'&gt;" + "$&amp;" + "&lt;/span&gt;");
                  var listItem = $("&lt;li&gt;&lt;/li&gt;")
                                 .data("item.autocomplete", item)
                                 .append("&lt;a&gt;" + t + "&lt;/a&gt;")
                                 .appendTo(ul);
                  return listItem;
  
                }
              }
              });
        };
  </code></pre>
  
  <p>This seems not to work as it is not throwing any result. Any help regarding this?</p>