实时搜索

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

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

<h3>
  Search Contacts
  <span class="htmx-indicator">
    <img src="/img/bars.svg"/> Searching...
   </span>
</h3>
<input class="form-control" type="search"
       name="search" placeholder="Begin Typing To Search Users..."
       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>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
    </thead>
    <tbody id="search-results">
    </tbody>
</table>

用户输入触发 input 的事件对 /search 发出一个 POST 请求，并将表的主体设置为结果内容。

我们向触发器添加了 delay:500ms 修饰符，以延迟发送查询，直到用户停止输入。此外，我们还向触发器添加了 changed 修饰符，以确保当用户未更改输入值（例如，他们按下箭头键或粘贴相同的值）时，我们不会发送新的查询。

我们可以使用多个触发器并通过用逗号分隔它们，这样我们就可以添加 2 个触发器：

  • keyup[key=='Enter'] 一旦按下 Enter 键就会触发。我们在这里使用事件过滤器来检查 KeyboardEvent 对象中的 key 属性。
  • load 为了在加载时最初显示所有结果。

最后，当搜索正在进行时，我们会显示一个带有 hx-indicator 属性的进度指示器。

Server Requests ↑ Show

演示