如何用JavaScript实现可同时匹配两个数据集的全局搜索栏功能

可行性说明 #

这个跨数据集搜索的需求完全可实现，无需重构现有核心逻辑，仅需要抽离公共渲染方法、新增搜索过滤逻辑即可。

是否需要调整现有渲染函数 #

需要做小幅度优化：你当前的showPlayers和showWines两个函数逻辑高度重复，仅渲染的数据源不同，建议抽离为公共渲染函数，同时支持分类按钮渲染和搜索结果渲染，减少代码冗余。

具体实现代码 #

1. 抽离公共渲染函数 #

// 公共渲染函数，接收任意数组作为渲染数据源
const renderList = (list) => {
  const contentContainer = document.querySelector(".product-content")
  contentContainer.innerHTML = ""

  // 无匹配结果时的提示
  if (list.length === 0) {
    contentContainer.innerHTML = `<p>未找到匹配内容</p>`
    return
  }

  list.forEach(item => {
    // 兼容球员数据的img字段，葡萄酒数据无该字段则不渲染
    const imgTpl = item.img ? `<img ${item.img}>` : ''
    contentContainer.innerHTML += `
    <article class="product-article">
        <h3>名称:${item.name}</h3>
        <p>年龄/年份: ${item.age}</p>
        <p>国家: ${item.fromCountry}</p>
        <p>位置/品类: ${item.position}</p>
        ${imgTpl}
    </article>
    `
  })
}

2. 简化原有分类按钮逻辑 #

const playersBtn = document.querySelector("#players-btn")
const wineBtn = document.querySelector("#wine-btn")

// 直接调用公共渲染函数传入对应数据集即可
playersBtn.addEventListener("click", () => renderList(liverpoolPlayers))
wineBtn.addEventListener("click", () => renderList(wineList))

3. 新增搜索功能逻辑 #

// 获取搜索相关DOM元素
const searchInput = document.querySelector("#search-input")
const searchBtn = document.querySelector("#search-btn")

// 搜索处理函数
const handleSearch = () => {
  // 取出关键词，去除首尾空格并转小写，实现大小写不敏感匹配
  const keyword = searchInput.value.trim().toLowerCase()

  // 关键词为空时默认渲染两个数据集的所有内容，不需要可自行修改为提示输入
  if (!keyword) {
    renderList([...liverpoolPlayers, ...wineList])
    return
  }

  // 合并两个数据集，过滤出所有包含关键词的条目
  const filteredResult = [...liverpoolPlayers, ...wineList].filter(item => {
    // 可自行调整需要匹配的字段，不需要的删除对应判断即可
    return item.name.toLowerCase().includes(keyword)
    || String(item.age).includes(keyword)
    || item.fromCountry.toLowerCase().includes(keyword)
    || item.position.toLowerCase().includes(keyword)
  })

  // 渲染过滤后的结果
  renderList(filteredResult)
}

// 绑定搜索按钮点击触发搜索
searchBtn.addEventListener("click", handleSearch)
// 可选：绑定回车键触发搜索，提升使用体验
searchInput.addEventListener("keydown", e => e.key === 'Enter' && handleSearch())

注意事项 #

• 你提供的代码中liverpoolPlayers数组缺少闭合括号、wineList未给出定义，请自行补全这两处避免运行报错
• 如果仅需要匹配名称字段，删除filter函数中除item.name外的其他判断条件即可

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