原生JavaScript搜索功能如何支持title、tags、author等多字段匹配？

API 探路者

2026-10-4

代码修改方案

你只需要修改showList函数中filter方法的匹配逻辑即可，原来的逻辑仅校验title字段，调整为同时校验title、author、tags三个字段，任意一个字段匹配搜索词就算命中。
注意如果你的tags字段是数组类型（绝大多数场景下都是数组存储标签），需要先把数组转为字符串再做匹配，修改后的完整代码如下：

document.addEventListener('DOMContentLoaded', function(event) {
  const search = document.getElementById('search');
  const results = document.getElementById('results');
  let data = [];
  let search_term = '';

  fetch('/search.json')
    .then(response => response.json())
    .then(data_server => {
      data = data_server;
    });

  search.addEventListener('input', event => {
    search_term = event.target.value.toLowerCase();
    showList();
  });

  const showList = () => {
    results.innerHTML = '';
    if (search_term.length <= 0) return;
    const match = new RegExp(`${search_term}`, 'gi');
    // 核心修改：多字段匹配逻辑
    let result = data.filter(item => {
      // 匹配title
      const titleMatch = match.test(item.title);
      // 匹配author，无该字段时默认不匹配
      const authorMatch = item.author ? match.test(item.author) : false;
      // 匹配tags，若为数组先转为字符串再判断
      const tagsMatch = item.tags ? match.test(Array.isArray(item.tags) ? item.tags.join(',') : item.tags) : false;
      // 任意字段匹配即判定为命中
      return titleMatch || authorMatch || tagsMatch;
    });
    if (result.length == 0) {
      const li = document.createElement('li');
      li.innerHTML = `No results found 😢`;
      results.appendChild(li);
    }
    result.forEach(e => {
      const li = document.createElement('li');
      li.innerHTML = `<a href="${e.url}">${e.title}</a>`;
      results.appendChild(li);
    });
  };
});