如何用htmx的hx-push-url将表单search输入值推送到URL？

原生htmx完全可以实现这个需求，不需要依赖Hyperscript，核心是利用它的表单变量替换功能，直接在hx-push-url中引用输入框的值。

基础提交版代码示例 #

<form hx-get="/search" hx-target="#results" hx-push-url="/?q={q}">
  <input type="text" name="q" id="search-input" placeholder="输入搜索关键词">
  <button type="submit">搜索</button>
</form>
<div id="results"></div>

关键说明：

• hx-push-url中的{q}是占位符，htmx会自动替换为表单里name="q"的输入框的实际值
• 使用hx-get方法配合URL参数更合理，符合GET请求的语义
• 提交表单时，浏览器地址栏会自动更新为/?q=你的搜索内容，同时该记录会被加入历史栈

实时输入推送版（无需点击提交） #

如果想要输入时实时更新URL，只需调整触发规则：

<form hx-get="/search" hx-target="#results" hx-push-url="/?q={q}" 
      hx-trigger="keyup changed delay:500ms from:#search-input">
  <input type="text" name="q" id="search-input" placeholder="输入搜索关键词">
</form>
<div id="results"></div>

关键说明：

• hx-trigger指定触发源为输入框，监听keyup和changed事件
• delay:500ms用于防抖，避免每次按键都触发请求和URL更新
• 输入过程中，地址栏会随内容实时变化，同时触发搜索请求

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