アクティブ検索

この例では、ユーザーがテキストを入力すると、連絡先データベースがアクティブに検索されます。

検索入力と空のテーブルから始めます。

<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 イベントで POST が /search に送信され、テーブルのボディが結果のコンテンツに設定されます。keyup イベントも使用できますが、ユーザーがマウス（またはキーボード以外の方法）でテキストを貼り付けた場合はトリガされません。

ユーザーが入力を停止するまでクエリを送信を遅延させるために、 delay:500ms 修飾子をトリガに追加します。さらに、ユーザーが入力値を変更しない場合（例：矢印キーを押す、または同じ値を貼り付ける）に新しいクエリを送信しないように、 changed 修飾子をトリガに追加します。

search タイプの入力をを使用するため、入力フィールドに x が表示され、入力がクリアされます。このトリガーを新しい POST にするには、別のトリガーを指定する必要があります。コンマを使用して別のトリガーを指定します。フィールドがクリアされると search トリガーが実行されますが、そのまま enter キーを押すと 500 ミリ秒の input イベントの遅延をオーバーライドできます。

最後に、hx-indicator 属性を使用して検索が実行中の場合にインジケーターを表示します。

🔗デモ