如何使用HTMX实现输入框输入或下拉选择时提交表单

你可以通过调整表单的 hx-trigger 属性，针对不同元素指定触发事件，实现需求的同时确保提交时包含两个字段的数据：

• 搜索输入框：监听 keyup 事件并添加 150ms 延迟，避免每次按键都发起请求
• 排序下拉框：监听 changed 事件，选项切换时立即提交

具体修改要点：

1. 优化表单的 hx-trigger 属性，使用事件过滤器精准指定触发元素和对应事件
2. 移除下拉框上多余的 value="0" 属性（选中的 <option> 会自动传递对应值）

修正后的代码：

<form hx-get="{% url 'search-spec' %}" hx-target="#search-results" hx-trigger="keyup from:#q delay:150ms, changed from:#sort">
    <div class="search w-100 mt-4 d-flex justify-content-center">
        <div class="input-group rounded w-75 shadow-4-soft">
            <span class="input-group-text me-2" id="search-addon">
                <i class="fas fa-search"></i>
            </span>
            <input type="search" class="form-control rounded" placeholder="Начните набирать..." name="q" id="q"/>
        </div>
    </div>
    <div class="search w-100 mt-2 d-flex justify-content-center">
        <span class="input-group-text me-2" id="search-addon">
            <i class="fas fa-sort"></i>
        </span>
        <select name="sort" id="sort" class="form-select w-50">
            <optgroup label="По дате публикации">
                <option value="0">Последние публикации</option>
                <option value="1" selected>Первые публикации</option>
            </optgroup>
            <optgroup label="По обозначению">
                <option value="2">Обозначение 0-9</option>
                <option value="3">Обозначение 9-0</option>
            </optgroup>
            <optgroup label="По наименованию">
                <option value="4">Наименование А-Я</option>
                <option value="5">Наименование Я-А</option>
            </optgroup>
        </select>
    </div>
</form>

修改后效果：

• 在搜索框输入内容时，会在停止输入 150ms 后提交表单，同时携带搜索关键词和当前选中的排序方式
• 切换下拉框选项时，会立即提交表单，携带当前的搜索关键词（如有）和新的排序方式

内容的提问来源于stack exchange，提问作者Sergey Ivanov