如何在BarbaJS无刷新页面切换后重新初始化SearchWP Live Ajax Search

SearchWP Live Ajax Search默认会在页面首次加载完成后扫描DOM中的搜索框元素绑定事件，BarbaJS无刷新过渡替换导航栏后，新插入的搜索框没有绑定对应事件就会失效，你可以根据你的场景选择以下任意一种方案修复：

方案一：调用插件内置初始化方法 #

在BarbaJS的过渡完成钩子中直接触发插件的初始化逻辑，这是成本最低的方案：

• 找到你的BarbaJS配置代码，在after钩子中添加如下逻辑：

barba.hooks.after(() => {
  // 确认页面中存在新插入的搜索框
  if (!document.querySelector('.searchwp-live-ajax-search')) return
  // 方法1：大部分版本的插件都会暴露全局初始化方法，直接调用即可
  if (window.SearchWP_Live_Search) {
    window.SearchWP_Live_Search.init()
  }
  // 如果上述方法不生效，尝试方法2：手动触发DOMContentLoaded事件触发插件初始化
  // 注意：如果有其他脚本也绑定了该事件，可能会造成重复执行，可根据实际情况取舍
  // document.dispatchEvent(new Event('DOMContentLoaded'))
})

方案二：手动绑定搜索事件（兼容性最高） #

如果你的插件版本没有暴露全局初始化方法，可以手动给新搜索框绑定事件调用插件的原生AJAX接口：

// Barba过渡完成后执行绑定
barba.hooks.after(() => {
  const searchInputs = document.querySelectorAll('.searchwp-live-ajax-search input[type="search"]')
  searchInputs.forEach(input => {
    // 先移除已绑定的事件避免重复触发
    input.removeEventListener('input', handleSearchWPSearch)
    input.addEventListener('input', handleSearchWPSearch)
  })
})

// 搜索逻辑处理函数
function handleSearchWPSearch(e) {
  const input = e.target
  const keyword = input.value.trim()
  // 匹配插件默认的最少字符限制，可自行调整
  if (keyword.length < 2) {
    // 关键词过短隐藏结果框
    const resultBox = input.closest('.searchwp-live-ajax-search').querySelector('.searchwp-live-search-results')
    if (resultBox) resultBox.style.display = 'none'
    return
  }
  // 组装插件要求的请求参数
  const formData = new FormData()
  formData.append('action', 'searchwp_live_search')
  formData.append('swpquery', keyword)
  formData.append('swpengine', 'default') // 替换为你后台配置的搜索引擎ID
  formData.append('swpnonce', window.searchwp_live_search_params.nonce)

  // 调用插件原生AJAX接口
  fetch(window.searchwp_live_search_params.ajax_url, {
    method: 'POST',
    body: formData
  })
  .then(res => res.text())
  .then(html => {
    const resultBox = input.closest('.searchwp-live-ajax-search').querySelector('.searchwp-live-search-results')
    if (resultBox) {
      resultBox.innerHTML = html
      resultBox.style.display = 'block'
    }
  })
}

方案三：事件委托（一劳永逸无需重复初始化） #

直接把事件绑定到页面不会被BarbaJS替换的根节点上，不需要每次过渡完成后重新执行初始化：

// 只需要在页面首次加载时执行一次即可
document.body.addEventListener('input', e => {
  if (!e.target.matches('.searchwp-live-ajax-search input[type="search"]')) return
  // 这里直接复用方案二中的handleSearchWPSearch逻辑即可
  handleSearchWPSearch(e)
})

注意事项 #

• 不同版本的SearchWP Live Ajax Search的类名、全局变量名可能存在细微差异，你可以打开浏览器控制台查看页面全局变量和元素结构做对应调整
• 使用前两种方案时注意先移除旧的事件监听，避免重复触发搜索请求

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