我有一个搜索输入和排序选择。我把它包装成表格。我如何通过在搜索输入中键入 (hx-trigger="keyup changed delay:150ms") 或在选择中选择另一个项目 (hx-trigger="changed") 来发送表单。我需要从这两个元素发送数据。 这是我的代码:
<form hx-get="{% url 'search-spec' %}" hx-target="#search-results" hx-trigger="keyup delay:150ms changed">
<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" value="0" 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>
您可以在输入中分别定义两个 hx 标签并选择然后使用
hx-include="closest form"
在两者中,在请求中包含该表单中的所有字段值。
这还可以让您更好地控制 hx-target 以及如何触发更改,当您单独定义它们时。