Как установить заголовок для автозаполнения JQuery

Question

Для автозаполнения я сортирую результаты по трем разделам: «заголовок», «компания», «тег».
Мне бы хотелось иметь заголовок для каждого раздела.
На практике я хочу добавить <div class='ui-optionHeader'>Headline</div> думаю, что до элементов li.
Я не могу понять, либо заголовок находится над каждым элементом, либо он вообще не работает.

Я сделал визуальное объяснение - вот к чему я стремлюсь:

---

Вот мой код:

$(document).ready(function() {
 src = "{{ route('searchajax') }}";
 $("#search_text").autocomplete({
    source: function(request, response) {
       $.ajax({
           url: src,
           dataType: "json",
           data: {
               term : request.term,
               searchOption : $("#search_option").val()
           },
           success: function(data) {
               response(data);
           }
       });
     },
   select: function(event, ui) {
    $('#search_text').val(ui.item.value);
  },
  minLength: 1,
  open : function(){
  //  $(".ui-autocomplete:visible").css({top:"+=13"});
  }
 })
  .autocomplete( "instance" )._renderItem = function( ul, item ) {

      if(item.option==="title") {
        return $( "<li>" )
          .append( "<div><i class='fas fa-tags'></i> " + item.label + "<br> title </div>" )
          .appendTo( ul );
      }

      else if(item.option==="company"){
        return $( "<li>" )
          .append( "<div><i class='fas fa-building'></i> " + item.label + "<br> company </div>" )
          .appendTo( ul );
      }

      else if(item.option==="tags"){
        return $( "<li>" )
          .append( "<div><i class='fas fa-utensils'></i> " + item.value + "<br> tags </div>" )
          .appendTo( ul );
      }
  };

});

Как это выглядит в настоящее время:

Заранее спасибо.

Answer 1

Пример:

$(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'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    }
  });
  var data = [{
      label: "anders",
      category: ""
    },
    {
      label: "andreas",
      category: ""
    },
    {
      label: "antal",
      category: ""
    },
    {
      label: "annhhx10",
      category: "Products"
    },
    {
      label: "annk K12",
      category: "Products"
    },
    {
      label: "annttop C13",
      category: "Products"
    },
    {
      label: "anders andersson",
      category: "People"
    },
    {
      label: "andreas andersson",
      category: "People"
    },
    {
      label: "andreas johnson",
      category: "People"
    }
  ];

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

.ui-autocomplete-category {
  background: #009F84;
  color: #fff;
  font-weight: bold;
  padding: .2em .4em;
  margin: 0;
  line-height: 1.5;
}

form #search {
  border: 1px solid #000;
  line-height: 2em;
  margin: 0;
  padding-left: .5em;
  width: 75%;
}

form button {
  background: #009F84;
  border: 0;
  color: #fff;
  font-weight: bold;
  padding: .65em 2em;
  margin-left: 0;
}

<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>
<form>
  <input id="search_text"> <button type="submit">Find</button>
</form>