如何用HTMX通过单次GET请求填充两个datalist？

核心思路 #

只发起一次GET请求，通过HTMX的Out of Band (OOB) 交换，让后端返回的内容同时更新两个datalist，彻底避免重复请求。

前端代码修改 #

移除两个datalist上的请求触发逻辑，改用一个隐藏元素统一发起请求：

<div>
    <label>White:</label>
    <input list="datalist_white_users" />
    <datalist id="datalist_white_users"></datalist>
</div>

<div>
    <label>Black:</label>
    <input list="datalist_black_users" />
    <datalist id="datalist_black_users"></datalist>
</div>

<!-- 隐藏的请求触发元素，hx-swap="none"表示不替换自身内容 -->
<div hx-get="/query/html/user/list" hx-trigger="load" hx-swap="none"></div>

后端代码修改 #

调整返回内容，生成两个带hx-swap-oob属性的片段，分别对应两个datalist的ID：

export async function get_query_html_user_list(req: any, res: any) {
    const list = ...; // 你的用户列表数据
    let options = '';
    for (const [name, rand_id] of list) {
        options += `<option value="${name}" id="${rand_id}">`;
    }
    // 返回两个OOB片段，HTMX会自动匹配页面上对应ID的元素并替换内容
    const response = `
        <datalist id="datalist_white_users" hx-swap-oob="innerHTML">${options}</datalist>
        <datalist id="datalist_black_users" hx-swap-oob="innerHTML">${options}</datalist>
    `;
    res.send(response);
}

工作原理 #

1. 页面加载时，隐藏的div发起一次GET请求到/query/html/user/list
2. 后端返回包含两个datalist结构的内容，每个结构都带有hx-swap-oob="innerHTML"属性
3. HTMX识别到OOB标记，自动找到页面上对应ID的datalist，用返回的option列表替换它们的内部HTML
4. 最终两个datalist都被填充，且仅发送了一次请求

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