主动搜索

本示例在用户输入文本时主动搜索联系人数据库。

我们从一个搜索输入框和一个空表开始：

<h3>
  搜索联系人
  <span class="htmx-indicator">
    <img src="/img/bars.svg"/> 搜索中...
   </span>
</h3>
<input class="form-control" type="search"
       name="search" placeholder="开始输入以搜索用户..."
       hx-post="/search"
       hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load"
       hx-target="#search-results"
       hx-indicator=".htmx-indicator">

<table class="table">
    <thead>
    <tr>
      <th>名</th>
      <th>姓</th>
      <th>邮箱</th>
    </tr>
    </thead>
    <tbody id="search-results">
    </tbody>
</table>

输入框在input事件上向/search发送POST请求，并将表格内容设置为返回的结果。

我们在触发器上添加delay:500ms修饰符，延迟发送查询直到用户停止输入。此外， 我们添加changed修饰符确保当用户没有改变输入值时不会发送新查询 (例如他们按了方向键，或粘贴了相同的值)。

我们可以用逗号分隔多个触发器，这样我们添加了2个额外触发器：

• keyup[key=='Enter']在按下回车时触发。我们在这里使用事件过滤器来检查KeyboardEvent对象中的key属性。
• load在页面加载时显示所有结果。

最后，我们使用hx-indicator属性在搜索进行时显示一个指示器。

🔗演示