htmx 不支持单个元素上为不同触发器（如 `keyup delay` 和 `change`）直接指定不同 `hx-target`，但可通过嵌套容器利用事件捕获与属性继承机制实现——外层容器响应 `change` 并更新 `#vendor_list`，内层容器响应 `keyup delay:500ms` 并更新 `#users_list`。
在 HTMX 中，hx-trigger 属性定义了何时发起请求，而 hx-target 指定了响应内容的插入位置。但 HTMX 的设计原则是：每个触发事件由最靠近事件源、且声明了对应 hx-trigger 的祖先元素处理，其 hx-target 优先级高于子元素。这意味着我们无法在同一个 <input> 上为不同触发条件分配不同目标——但可以巧妙利用 DOM 层级和属性继承来达成等效效果。
核心思路是：将 <input> 包裹在两层语义清晰的容器中，每层绑定一种触发器及对应的目标：
- 外层 <div> 响应 change 事件，指向 #vendor_list；
- 内层 <div> 响应 keyup delay:500ms，指向 #users_list；
- <input> 本身不声明 hx-trigger 或 hx-target，仅作为事件源和表单控件存在。
✅ 正确实现示例（含 Django CSRF 安全适配）：
<!-- 外层：响应 change，更新 vendor_list -->
<div hx-target="#vendor_list"
hx-trigger="change"
hx-post="{% url 'search_vendor' %}"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<!-- 内层：响应 keyup delay，更新 users_list -->
<div hx-target="#users_list"
hx-trigger="keyup delay:500ms"
hx-post="{% url 'search_user' %}"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<input list="users_list"
type="text"
name="user_name"
class="search-bar"
placeholder="Username"
id="user_search_bar"
value="">
<datalist id="users_list">
<option value="alice">Alice</option>
<option value="bob">Bob</option>
</datalist>
</div>
</div>
<!-- 目标容器需提前声明 -->
<div id="users_list"></div>
<div id="vendor_list"></div>⚠️ 注意事项：
- 事件冒泡与捕获顺序：keyup 是冒泡事件，会先被内层 <div> 捕获；change 通常在失焦或选项确认后触发，由外层 <div> 处理。二者互不干扰。
- 避免重复请求：确保两个 hx-post 路由返回的内容结构与对应 hx-target 的预期一致（例如 #users_list 应接收 <option> 列表片段，#vendor_list 接收其专属 HTML 片段）。
- CSRF 安全性：Django 环境下务必通过 hx-headers 传递 X-CSRFToken，不可省略；若使用 hx-include 提交表单字段，也需确保 token 字段被包含。
- 性能提示：delay:500ms 可有效防抖，但需注意用户快速输入时可能取消前序请求（HTMX 默认自动取消未完成请求，行为可靠）。
通过这种嵌套策略，你无需编写 JavaScript 即可实现“一输入、双目标、多逻辑”的交互模式，既保持了 HTMX 的声明式简洁性，又满足了复杂 UI 的精准更新需求。
