htmx 本身不直接提供 `datalist-select` 类型的触发器，但可通过监听 `` 元素的原生 `change` 事件实现在用户从 datalist 中选择选项后自动发起请求。
在 HTML 中，<datalist> 本身是一个纯展示性元素，不触发独立事件；真正响应用户交互的是与其绑定的 <input> 元素。当用户手动输入并失焦，或更关键地——从下拉建议中点击/回车选择某项时，浏览器会立即触发该 <input> 的 change 事件（注意：不是 input 或 keyup）。这是 HTMX 可靠捕获“选项已确认”行为的标准方式。
因此，只需将原 hx-trigger="keyup delay:500ms" 替换为 hx-trigger="change"，即可精准响应 datalist 选项选择动作：
<input list="users_list"
type="text"
name="name"
placeholder="Username"
id="user_search_bar"
value=""
hx-trigger="change"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-post="{% url 'user_search' %}"
hx-target="#users_list">
<datalist id="users_list">
{% for user in users %}
<option data-value="{{ user.id }}" value="{{ user.username }}">{{ user.get_full_name }}</option>
{% endfor %}
</datalist>✅ 优势说明：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- change 触发时机精准：仅在值真正被确认（选中、回车、失焦）后执行，避免搜索抖动；
- 兼容所有选择方式：鼠标点击、键盘方向键+回车、Tab 切换后失焦均有效；
- 与 Django CSRF 安全机制无缝协作，无需额外 JS。
⚠️ 注意事项：
- 若需同时支持“搜索即输即查”和“选中即提交”，可组合触发器：hx-trigger="keyup delay:500ms, change"，但需在后端区分请求来源（例如通过 request.headers.get('HX-Trigger') 或添加隐藏参数），避免重复逻辑；
- change 事件不会在纯键盘输入未确认时触发（如输入中途刷新页面），因此它天然适合作为“最终确认”信号，而非实时搜索；
- 确保 <datalist> 中 <option> 的 value 属性值与 <input> 最终显示值一致，否则 change 事件可能因值未变更而不触发（浏览器规范行为）。
综上，利用原生 change 事件是 HTMX 场景下响应 datalist 选择最简洁、标准且可靠的方式。
