活动搜索

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

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

<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, search" 
       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请求，并将表格的主体设置为结果内容。注意，keyup事件也可以使用，但如果用户使用鼠标粘贴文本（或任何其他非键盘方法），则不会触发。

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

由于我们使用了一个search类型的输入框，因此我们将在输入框中得到一个x来清除输入框。为了使这触发一个新的POST请求，我们必须指定另一个触发器。我们使用逗号分隔它们来指定另一个触发器。search触发器将在字段被清除时运行，但它也使我们能够通过只按回车键来覆盖 500 毫秒的input事件延迟。

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

🔗演示