htmx 不支持单个元素为不同触发事件（如 `keyup` 和 `change`）指定独立的 `hx-target`，但可通过嵌套容器利用事件捕获与属性继承机制实现：外层容器响应 `change` 并指向 `#vendor_list`，内层容器响应 `keyup delay:500ms` 并指向 `#users_list`。
在 HTMX 中，hx-trigger 属性本身不支持按触发类型动态切换 hx-target——即无法像 hx-target="keyup:#users_list, change:#vendor_list" 这样声明。但 HTMX 的设计哲学强调就近继承（closest matching attributes）和事件冒泡捕获，这为我们提供了优雅的替代方案：通过嵌套具有不同 hx-trigger 和 hx-target 的容器元素，让不同事件被不同层级捕获并执行对应行为。
具体实现如下：
<div hx-target="#vendor_list" hx-trigger="change" hx-post="{% url 'search_vendor' %}">
<div hx-target="#users_list" hx-trigger="keyup delay:500ms" hx-post="{% url 'search_user' %}">
<input
list="users_list"
type="text"
name="user_name"
class="search-bar"
placeholder="Username"
id="user_search_bar"
value=""
x-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
>
<datalist id="users_list">
<option value="elem">elem</option>
</datalist>
</div>
</div>
<!-- 目标容器需独立存在且位于 DOM 中 -->
<div id="vendor_list">Vendor results will appear here</div>✅ 关键原理说明：
- change 事件（如失焦或选项确认）会向上冒泡，首先被最外层 <div> 捕获 → 触发 /search_vendor，结果渲染到 #vendor_list；
- keyup 事件在输入过程中持续触发，但因设置了 delay:500ms，仅在用户停顿半秒后才发起请求；该事件由中间 <div> 捕获（更近的 hx-trigger 优先），调用 /search_user，结果更新 #users_list；
- hx-post、x-headers 等属性可放在任意父级或 <input> 自身，HTMX 会沿 DOM 向上查找最近的有效值（x-headers 推荐保留在 <input> 上以确保 CSRF Token 始终可用）。
⚠️ 注意事项：
- 所有 hx-target 对应的 DOM 元素（如 #users_list、#vendor_list）必须真实存在于页面中，即使 <datalist> 是特殊语义元素，也需确保其 ID 可被 HTMX 正确定位；
- 避免将 hx-trigger="change" 直接写在 <input> 上再叠加嵌套——这会导致事件重复触发或目标冲突；
- 若需复用逻辑，可封装为自定义 HTMX 插件或结合 hx-on::afterRequest 做后续处理，但本方案纯原生、零 JS 依赖，符合 HTMX “渐进增强”理念。
通过这种结构化嵌套，你无需编写一行 JavaScript，即可精准控制多场景下的异步行为分流——这也是 HTMX “HTML 优先”范式的典型实践。
