如何配置mmenu.js插件的菜单搜索功能支持同义词检索

你之前的两种方案失效是因为mmenu.js原生搜索逻辑默认仅读取标签的可见文本内容：

方案1：自定义搜索匹配逻辑（灵活可控） #

推荐优先使用该方案，不需要修改DOM结构的展示逻辑，仅通过配置自定义检索规则即可实现。

1. 调整DOM结构，使用符合HTML规范的data-*属性存储同义词（多个同义词用英文逗号分隔即可）

<li><a href="#" data-synonym="movie,cinema">Film</a></li>

2. 初始化mmenu时重写searchfield的搜索回调逻辑

$("#your-menu-id").mmenu({
  // 保留你原有其他配置
  searchfield: {
    add: true,
    // 自定义检索规则
    search: function(query, $menu) {
      // 清空上一轮搜索的结果标记
      $menu.find(".mm-search-result").removeClass("mm-search-result");
      const searchKey = query.trim().toLowerCase();
      if (searchKey.length < 1) return;

      // 遍历所有菜单项，同时匹配文本和同义词
      $menu.find("li a").each(function() {
        const $item = $(this);
        const itemText = $item.text().toLowerCase();
        const itemSynonyms = $item.data("synonym") ? $item.data("synonym").toLowerCase() : "";
        if (itemText.includes(searchKey) || itemSynonyms.includes(searchKey)) {
          $item.parents("li").addClass("mm-search-result");
        }
      });
    }
  }
});

方案2：CSS视觉隐藏同义词（无侵入无需改JS） #

如果你不想修改mmenu的初始化配置，可以用视觉隐藏替代display: none，让同义词内容能被检索逻辑读取，但不会在页面展示：

1. 新增CSS样式

.mm-hidden-synonym {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

2. 修改DOM结构，把同义词放在对应类名的标签内

<li><a href="#">Film <span class="mm-hidden-synonym">movie cinema</span></a></li>

注意事项 #

• 两种方案均兼容mmenu.js v8及以上主流版本，低于v8的旧版本优先使用方案2
• 多同义词场景直接用逗号/空格分隔即可，不影响匹配效果

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