JavaScript图片搜索加载更多时旧结果重复显示问题求助

问题描述 #

开发图片搜索项目时遇到以下问题：输入关键词可正常展示搜索结果，更换关键词后也能显示新结果，但点击「加载更多」按钮时，旧搜索结果会出现在新结果下方；多次点击该按钮后，旧结果甚至会跑到顶部，新结果位于其下方。

问题根源分析 #

1. 全局page变量未在新搜索时重置：更换关键词搜索时，page仍保留之前递增后的数值，导致新搜索可能从非第一页开始请求，且未清空旧结果。
2. 加载更多按钮事件重复绑定：每次触发新搜索（page=1时）都会给按钮添加新的点击回调，点击一次会执行多次逻辑，造成page跳变、结果清空混乱。
3. 加载更多时错误清空结果：当前代码在加载更多回调里执行`searchRes.innerHTML = ```，本该追加新内容却清空了之前的结果。
4. DOM结构拼接不完整：循环中只添加.row的起始标签，未正确闭合，导致DOM结构混乱，影响结果展示顺序。

修复后的完整代码 #

JavaScript（search.js）

let imgsearch = document.querySelector('.imgsearch')
let bsub = document.querySelector('.bsub')
// let editorChoice = document.querySelector('.editorchoice')
let searchRes = document.querySelector('.searchresult')
let form = document.querySelector('form')
let discoverSearch = document.querySelector('.discoversearch')
let page = 1
let currentQuery = '' // 存储当前搜索关键词，避免加载更多时混淆

// 一次性绑定加载更多事件，避免重复绑定
discoverSearch.addEventListener('click', () => {
  page++
  searchResult(currentQuery, false) // false表示追加内容
})

function mySearch(e) {
  e.preventDefault()
  const query = document.querySelector('input').value.trim()
  if (!query) return // 空关键词不执行搜索

  // 新搜索重置状态
  page = 1
  currentQuery = query
  discoverSearch.style.display = 'block'
  // discoverMore.style.display = 'none' // 若有该元素可保留

  // 清空旧结果，加载第一页
  searchResult(query, true)
}

form.addEventListener('submit', mySearch)
bsub.addEventListener('click', mySearch)

async function searchResult(query, isNewSearch) {
  try {
    const searchUrl = await fetch(`https://pixabay.com/api/?key=12345&q=${query}&page=${page}&per_page=24`)
    const rawSearch = await searchUrl.json()
    const resultSearch = rawSearch.hits

    // 新搜索清空结果，加载更多则保留旧结果
    if (isNewSearch) {
      searchRes.innerHTML = ''
      // editorChoice.innerHTML = '' // 若有该元素可保留
    }

    let rowHTML = ''
    for (let i = 0; i < resultSearch.length; i++) {
      const itemSearch = resultSearch[i]
      const searchImg = itemSearch.previewURL
      const searchTag = itemSearch.tags
      const itemId = itemSearch.id

      // 每3个元素创建一个新行，避免DOM拼接混乱
      if (i % 3 === 0) {
        // 若已有未闭合的行，先闭合
        if (rowHTML) {
          rowHTML += '</div>'
          searchRes.innerHTML += rowHTML
          rowHTML = ''
        }
        rowHTML = '<div class="row">'
      }

      rowHTML += `
        <a href="photos.html?id=${itemId}"><img src="${searchImg}" alt="${searchTag}"/></a>
        <p><a href="photos.html?id=${itemId}">${searchTag}</a></p>
      `
    }

    // 循环结束后闭合最后一行
    if (rowHTML) {
      rowHTML += '</div>'
      searchRes.innerHTML += rowHTML
    }
  } catch (err) {
    console.error('搜索请求失败:', err)
  }
}

HTML

<div class="searchresult"></div>

修复说明 #

1. 新增currentQuery变量：存储当前搜索关键词，确保加载更多时请求的是同一关键词的下一页内容。
2. 重置搜索状态：每次新搜索时强制将page设为1，清空旧结果，避免残留之前的分页状态。
3. 事件绑定优化：加载更多按钮的事件只绑定一次，避免重复触发导致的逻辑混乱。
4. DOM拼接优化：通过临时变量rowHTML拼接每行内容，确保.row标签正确闭合，避免DOM结构错误。
5. 区分新搜索与加载更多：通过isNewSearch参数控制是清空结果还是追加内容，符合用户操作逻辑。

内容的提问来源于stack exchange，提问作者Himansu Kumar Nayak