如何通过按钮触发Simple-Jekyll-Search自动搜索标签/分类内容？

我之前也踩过一模一样的坑！折腾各种键盘事件模拟总不生效，后来才发现根本不用绕这个弯——Simple-Jekyll-Search本身就提供了直接触发搜索的API，比模拟按键靠谱太多了。

核心思路 #

别再死磕键盘事件了，直接调用搜索实例的search()方法就行！步骤超简单：

1. 初始化搜索时保存好实例引用
2. 给标签/分类按钮绑定点击事件，填充搜索框后直接调用实例的搜索方法

具体代码示例 #

首先，确保你初始化搜索时把实例存下来（之前可能只是初始化但没保留引用）：

// 初始化搜索并保存实例
const searchInstance = new SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'), // 你的搜索框ID
  resultsContainer: document.getElementById('results-container'), // 结果容器ID
  json: '/search.json', // 你的搜索数据源路径
  // 其他配置项（比如搜索结果模板、高亮规则等）按你的需求添加
});

然后给所有标签/分类按钮绑定点击逻辑：

// 假设你的标签按钮都有统一的类名，比如"tag-btn"
const tagButtons = document.querySelectorAll('.tag-btn');

tagButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 获取标签文本，记得去掉多余空格
    const tagName = button.textContent.trim();
    const searchInput = document.getElementById('search-input');
    
    // 第一步：把标签名填入搜索框
    searchInput.value = tagName;
    
    // 第二步：直接触发搜索！这里可以传标签名，也可以不传（默认用输入框当前值）
    searchInstance.search(tagName);
  });
});

为什么模拟键盘事件没用？ #

很多时候手动触发keyup/input事件不生效，是因为Simple-Jekyll-Search内部可能对输入事件做了防抖处理，或者依赖真实的用户交互状态判断。而直接调用官方提供的search()方法，是库设计时就预留的触发搜索的正规方式，完全不会有兼容性问题。

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