URL跳转后保持输入框状态，如何实现类似Netflix搜索栏的交互效果？

这个效果的核心前提是不触发全页面重载，仅修改URL参数同时保留页面当前状态，具体实现思路如下：

• 优先用前端路由能力修改URL参数，禁止直接调用window.location相关跳转逻辑。原生JS可以用history.pushState/history.replaceState接口，框架场景直接调用对应路由库的API（比如Vue Router的push、React Router的navigate）即可，实现修改URL的query参数但页面不刷新，输入框的激活状态天然不会丢失。
• 给输入框的input事件加防抖处理（建议200~300ms阈值），避免输入过程中频繁修改URL，拿到输入值后同步更新到URL的query参数中，比如原路径为/search，输入关键词后更新为/search?q=输入的关键词。
• 若你的业务逻辑中搜索页切换会销毁重建输入框组件，需要在组件挂载完成后，主动拿到输入框DOM元素调用focus()方法恢复激活状态，同时将路由query中取出的关键词赋值给输入框的value，保证内容和URL同步。
• 搜索请求逻辑建议绑定路由query参数的变化事件，不要直接绑定输入框事件触发请求，避免URL更新和搜索请求逻辑出现时序不同步的问题。

原生JS极简实现示例：

const searchInput = document.querySelector('#search-input')

// 防抖工具函数
function debounce(fn, delay = 300) {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

// 监听输入更新URL
searchInput.addEventListener('input', debounce(function(e) {
  const keyword = e.target.value.trim()
  const currentUrl = new URL(window.location)
  if (keyword) {
    currentUrl.searchParams.set('q', keyword)
  } else {
    currentUrl.searchParams.delete('q')
  }
  // 替换当前历史记录，避免用户回退需要多次撤销输入
  history.replaceState({}, '', currentUrl)
  // 此处可调用搜索请求逻辑
}))

// 页面初始化同步状态
window.addEventListener('DOMContentLoaded', function() {
  const initKeyword = new URL(window.location).searchParams.get('q')
  if (initKeyword) {
    searchInput.value = initKeyword
    searchInput.focus()
  }
})

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