htmx 本身不直接提供 `datalist-select` 类型的触发器，但可通过监听 `` 元素的原生 `change` 事件实现在用户从 datalist 中选择选项后自动发起请求。
在 HTML 中，
因此，只需将原 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>✅ 优势说明：
- change 触发时机精准：仅在值真正被确认（选中、回车、失焦）后执行，避免搜索抖动；
- 兼容所有选择方式：鼠标点击、键盘方向键+回车、Tab 切换后失焦均有效；
- 与 Django CSRF 安全机制无缝协作，无需额外 JS。
⚠️ 注意事项：
- 若需同时支持“搜索即输即查”和“选中即提交”，可组合触发器：hx-trigger="keyup delay:500ms, change"，但需在后端区分请求来源（例如通过 request.headers.get('HX-Trigger') 或添加隐藏参数），避免重复逻辑；
- change 事件不会在纯键盘输入未确认时触发（如输入中途刷新页面），因此它天然适合作为“最终确认”信号，而非实时搜索；
- 确保
综上，利用原生 change 事件是 HTMX 场景下响应 datalist 选择最简洁、标准且可靠的方式。
