实战案例

<div id="app">
    <input id="kw" placeholder="搜索新闻…">
    <p id="status"></p>
    <ul id="list"></ul>
</div>

<script>
const kw = document.getElementById("kw");
const list = document.getElementById("list");
const status = document.getElementById("status");

async function search(keyword = "") {
    status.textContent = "加载中…";
    list.innerHTML = "";
    try {
        const res = await fetch("/api/news?kw=" + encodeURIComponent(keyword));
        if (!res.ok) throw new Error("接口错误");
        const data = await res.json();
        status.textContent = "";
        if (!data.length) {
            status.textContent = "没有找到相关新闻";
            return;
        }
        list.innerHTML = data.map(n =>
            `<li><a href="${n.url}" target="_blank">${n.title}</a></li>`
        ).join("");
    } catch (err) {
        status.textContent = "加载失败：" + err.message;
    }
}

// 防抖：停止输入 300ms 后再请求
let timer;
kw.addEventListener("input", () => {
    clearTimeout(timer);
    timer = setTimeout(() => search(kw.value), 300);
});

search();   // 首次加载
</script>