如何为jQuery autocomplete设置分组标题

我之前也踩过这个坑，核心是要重写jQuery UI Autocomplete的_renderMenu方法来掌控整个下拉菜单的构建逻辑，而不是在单个选项渲染里乱加标题。这样就能精准实现每个分组只显示一次标题的效果，不会重复也不会消失。

步骤1：准备带分组标识的数据源 #

首先得确保你的每个搜索条目都包含group字段，用来区分它属于title/company/tag哪个分组：

const searchData = [
  { label: "前端开发实战", value: "前端开发实战", group: "title" },
  { label: "字节跳动", value: "字节跳动", group: "company" },
  { label: "React", value: "React", group: "tag" },
  { label: "JavaScript高级教程", value: "JavaScript高级教程", group: "title" },
  { label: "阿里巴巴", value: "阿里巴巴", group: "company" },
  { label: "Vue", value: "Vue", group: "tag" }
];

步骤2：重写_renderMenu实现分组渲染 #

通过跟踪当前分组，当遇到新分组时插入标题，再渲染该组的所有选项：

$("#your-search-input").autocomplete({
  source: searchData,
  minLength: 1 // 输入至少1个字符触发搜索
})
.data("ui-autocomplete")._renderMenu = function(ul, items) {
  const that = this;
  let currentGroup = null;

  // 先对条目按分组排序，确保同组的项连续排列，避免标题重复出现
  items.sort((a, b) => a.group.localeCompare(b.group));

  $.each(items, function(index, item) {
    // 当当前项的分组和上一个不同时，插入分组标题
    if (item.group !== currentGroup) {
      ul.append(`<div class='ui-optionHeader'>${item.group}</div>`);
      currentGroup = item.group;
    }
    // 用UI自带的方法渲染单个选项，保持和默认样式一致
    that._renderItemData(ul, item);
  });
};

步骤3：添加CSS优化显示效果 #

默认的jQuery UI下拉菜单样式可能和分组标题冲突，加以下样式让布局更协调：

/* 分组标题样式 */
.ui-optionHeader {
  padding: 6px 12px;
  background-color: #f5f5f5;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  color: #333;
}

/* 调整下拉菜单容器样式 */
.ui-autocomplete {
  padding: 0;
  list-style: none;
}

/* 确保选项和标题的间距一致 */
.ui-autocomplete li {
  padding: 6px 12px;
  cursor: pointer;
}

.ui-autocomplete li:hover {
  background-color: #e9e9e9;
}

为什么之前的方法会失效？ #

• 如果是在_renderItem里插入标题，会导致每个选项前都加一次标题，出现重复；
• 如果没有正确重写_renderMenu，而是直接手动修改DOM，很可能会被Autocomplete的内部渲染逻辑覆盖，导致标题不显示。

通过重写_renderMenu，我们完全掌控了下拉菜单的构建流程，就能实现每个分组只显示一次标题的目标啦～

内容的提问来源于stack exchange，提问作者user6904588