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

的格式生成数据

我尝试从这篇文章中引用：Grouping results in JQuery UI Autocomplete plugin?，但无法将我的代码合并到此文件中进行分组。