This example shows how to use jQuery UI autocomplete Extension Points to customize auto-complete drop-down content

This example shows how to use jQuery UI autocomplete Extension Points to customize auto-complete drop-down content.

Using ui-autocomplete instead should solve your issue.

$("#lexicon-search-input")
    .autocomplete({
    ...
    }).data("ui-autocomplete")._renderItem = customItemRenderer;

See the documentation for a tutorial on how to use _renderItem (especially the source code)

If you want to create the _renderItem function for multiple autocompletes with class yourClass just use it in the createevent

$('.yourClass').autocomplete({
    create: function() {
        $(this).data('ui-autocomplete')._renderItem ....
    }
});

Full example:

  // global ajax setting.
  $.ajaxSetup({
    type: 'post',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    timeout: 60 * 1000,
    headers: {
      Authorization: token,
    },
  });

function BindLine(LineNum) {
    $('#Line_' + LineNum + '_ItemNum').autocomplete({
      minLength: 2,
      source: function (request, response) {
        var optObj = {};
        optObj.ItemNum = request.term;

        $.ajax({url: '/test?act=ListItem', data: JSON.stringify(optObj),
          success: function(dataObj) {
            if (dataObj.Status == true) {
              response(dataObj.PostListItemLineArr);
            } else {
              response([]);
            }
          },
          error: function(dataObj) {
            response([]);
          },
        });
      },
      create: function() {
        $(this).autocomplete("widget").css({
          height: 200,
          "overflow-x": "hidden",
          "overflow-y": "scroll",
        });

        $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
          var html = '<div class="row">'
              + '<div class="col-lg-2">' + item.ItemNum + '</div>'
              + '<div class="col-lg-8">' + item.ItemName + '</div>'
              + '<div class="col-lg-2">' + item.InventoryQty + '</div>'
            + '</div>';
          return $("<li>")
            .append(html)
            .appendTo(ul);
        };

        $(this).data('ui-autocomplete')._resizeMenu = function() {
          this.menu.element.outerWidth(500);
        };
      },
      close: function(event, ui) {
        var itemNum = $(this).val();
      },
      select: function(event, ui) {
        $(this).val(ui.item.ItemNum);
      },
    });
}

Cannot set property '_renderItem' of undefined jQuery UI autocomplete

And now, with jQuery-2.0.0, it's the name of your new module, but replacing the "." (dot) by the "-" (dash) :

jQuery.widget ('custom.catcomplete', jQuery.ui.autocomplete, {
    '_renderMenu': function (ul, items) {
        // some work here
    }
});

$this.catcomplete({
    // options
}).data('custom-catcomplete')._renderItem = function (ul, item) {}

Reference:

http://stackoverflow.com/questions/17568630/jqueryui-version-1-10-autocomplete-how-to-set-renderitem

http://stackoverflow.com/questions/16371204/how-to-change-rendering-of-dropdown-in-jquery-ui-autocomplete-attached-to-a-clas/16372823#16372823

http://stackoverflow.com/questions/9513251/cannot-set-property-renderitem-of-undefined-jquery-ui-autocomplete-with-html