jQuery AutoComplete Results loaded from partial view

Question

I have searched and unfortunately not found the answer for this. Apologies if this is a duplicate. Can the results from an autocomplete be loaded from a partial?

        $('#searchBox2').catcomplete({
            delay: 0,
            minLength: 1,
            source: '/api/CheckOrders/Search?searchString=' + inputData,
            select: function (event, ui) {

            }
        }).bind('focus', function () {
            $(this).keydown();
        });
    }

I have got the results showing correctly in categories etc but the styling that I want is getting overwritten by the UI styling and its getting a little messy. I was wondering if the results could be loaded from a partial, as this would allow me to style the results more easily. Shown below is how the results are currently shown but UI styling takes over.

    function LoadAutoComplete(inputData) {
        $.widget("custom.catcomplete", $.ui.autocomplete, {
            _create: function () {
                this._super();
                this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
            },
            _renderMenu: function (ul, items) {

                var that = this,
                    currentCategory = "";

                $.each(items, function (index, item) {
                    var li;
                    if (item.category != currentCategory) {
                        ul.append("<div class='aa-suggestions-category' style='margin-top: 10px;padding-left: 5px;'>" + item.category);
                        currentCategory = item.category;
                    }

                    li = that._renderItemData(ul, item);

                    if (item.category) {
                        li.attr("aria-label", item.category + " : " + item.label);
                    }
                });
            },
            _renderItem: function (ul, item) {
                if (item.category === "Cancelled") {
                    return $("</div><span class='aa-suggestions' style='display: block;'><div class='aa-suggestion'>")
                        .append("<span>" +
                            item.customerID + "</span><span>" +
                            item.customerName + "</span><span>" +
                        item.email + "</span></div></div>")
                        .appendTo(ul);
                }

                else {
                   
                }
            }
        });

Answer 1

Without a proper example, I made use of the Demo: https://jqueryui.com/autocomplete/#categories

Consider the following.

$(function() {
  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.category != currentCategory) {
          ul.append("<li class='ui-autocomplete-category aa-suggestions-category'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    },
    _renderItem: function(ul, item) {
      return $("<li>")
        .attr("data-value", item.value)
        .append("<div class='aa-suggestion'><span>" +
          item.customerID + "</span><span>" +
          item.customerName + "</span><span>" +
          item.email + "</span></div>")
        .addClass("aa-suggestions")
        .appendTo(ul);
    }
  });

  var data = [{
      label: "anders",
      category: "",
      customerID: "01",
      customerName: "anders",
      email: "[email protected]"
    },
    {
      label: "andreas",
      category: "",
      customerID: "02",
      customerName: "andreas",
      email: "[email protected]"
    },
    {
      label: "antal",
      category: "",
      customerID: "03",
      customerName: "antal",
      email: "[email protected]"
    },
    {
      label: "annhhx10",
      category: "Products",
      customerID: "04",
      customerName: "ann h",
      email: "[email protected]"
    },
    {
      label: "annk K12",
      category: "Products",
      customerID: "05",
      customerName: "ann k",
      email: "[email protected]"
    },
    {
      label: "annttop C13",
      category: "Products",
      customerID: "06",
      customerName: "ann top",
      email: "[email protected]"
    },
    {
      label: "anders andersson",
      category: "People",
      customerID: "07",
      customerName: "anders anderson",
      email: "[email protected]"
    },
    {
      label: "andreas andersson",
      category: "People",
      customerID: "08",
      customerName: "andreas andersson",
      email: "[email protected]"
    },
    {
      label: "andreas johnson",
      category: "People",
      customerID: "09",
      customerName: "andreas johnson",
      email: "[email protected]"
    }
  ];

  $("#search").catcomplete({
    delay: 0,
    source: data
  });
});

.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
}

.aa-suggestion span {
  padding-right: 7px;
}

.aa-suggestion span:nth-child(2) {
  width: 90px;
  display: inline-block;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<label for="search">Search: </label><input id="search">

This continues to use the ul and li for the menu. If you're using alternate items, please update your post with the proper example. This wraps and assigns the classes you desired for the various elements.