JQuery автозаполнение группы по первой букве

Question

Я пытаюсь создать строку поиска, в которой список словарей результатов показывает, где слова сгруппированы по первой букве, и я хочу показать результаты в следующем формате:

Ожидаемый результат:

A
 Apple
 abandon
B
 bracket
 biodiversity
C
 Classification

$(function() {
  var dataList = [{
    "word": "aback",
    "definition": "aback definition",
    "group": "A"
  }, {
    "word": "abacus",
    "definition": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled",
    "group": "A"
  }, {
    "word": "abdicate",
    "definition": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to m",
    "group": "A"
  }, {
    "word": "abdication",
    "definition": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to m",
    "group": "A"
  }, {
    "word": "Bracket",
    "definition": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to m",
    "group": "B"
  }, {
    "word": "Classification",
    "definition": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to m",
    "group": "C"
  }];

  $("#dictSearchInput").autocomplete({
    search: function(event, ui) {
      $('#search_dropdown_wrapper ul').empty();
    },
    minLength: 0,
    source: function(request, response) {
      //add highlight color
      var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
      response($.map(dataList, function(item, index) {
        return {
          label: item.word.split('$')[0].replace(regex, "<b style='background-color: #efbc04;font-color:black;'>$1</b>"),
          val: item.definition,
          index: index,
          group: item.group
        }

      }))
    },

  }).data("ui-autocomplete")._renderItem = function(ul, item) {
    var innHtml = "<div id='counter-" + item.index + "' class='spoiler'><a data-toggle='collapse' data-target='#toggle-example-" + item.index + "'>" + item.label + "</a><div id='toggle-example-" + item.index + "' class='collapse'>" + item.val + "</div></div>";
    return $("<li/>")
      .data("ui-autocomplete-item", item)
      .append(innHtml)
      .appendTo('#search_dropdown_wrapper ul');
  };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<input type="text" name="searchInput" id="dictSearchInput" required class="dict-form-control" placeholder="Enter search term" />

<!--search results will be displayed-->
<div id="search_dropdown_wrapper"><br>
  <ul></ul>
</div>

В разделе «Фактическое поведение» я выполняю вызов ajax для поиска результатов каждый раз, когда пользователь вводит слово.Ajax будет выводить данные в формате dataList

Я пытался воспользоваться ссылкой из этого поста: Группировать результаты в плагине JQuery UI Autocomplete? , но не смог объединить мой код в этот длягруппировка.