Fresh(Deno)搜索页面加载即执行，如何改为点击提交后触发？

问题分析 #

当前代码的核心问题在于：访问/search时，GET handler会默认获取空的q参数，而NAMES.filter(name => name.includes(""))会匹配所有名字，导致页面加载直接显示全部结果。同时表单默认采用GET提交，初始加载无参数的场景未被区分，造成“自动执行搜索”的错觉。

解决方案 #

调整handler逻辑，仅当存在非空的q参数时才执行搜索；同时页面根据搜索状态展示对应内容，区分首次加载和提交搜索的场景。

修改后的完整代码（routes/search.tsx） #

import Layout from '../components/layouts.tsx';
import { Handlers, PageProps } from "$fresh/server.ts";

const NAMES = ["Alice", "Bob", "Charlie", "Dave", "Eve", "Frank"];

interface Data {
  results: string[];
  query: string;
  hasSearch: boolean; // 标记是否执行过有效搜索
}

export const handler: Handlers<Data> = {
  GET(req, ctx) {
    const url = new URL(req.url);
    const query = url.searchParams.get("q")?.trim() || "";
    let results: string[] = [];
    const hasSearch = query !== "";

    // 仅当query非空时执行过滤逻辑
    if (hasSearch) {
      results = NAMES.filter((name) => name.includes(query));
    }

    return ctx.render({ results, query, hasSearch });
  },
};

export default function Page({ data }: PageProps<Data>) {
  const { results, query, hasSearch } = data;
  return (
    <Layout>
      <form>
        <h1 class="text rounded-lg p-4 my-8"> Search </h1>
        <input class="center rounded-lg p-4 my-8" type="text" name="q" value={query} />
        <br />
        <button
            class="px-5 py-2.5 text-sm font-medium bg-blue-600 rounded-md shadow disabled:(bg-gray-800 border border-blue-600 opacity-50 cursor-not-allowed)"
            type="submit">Submit
        </button>
      </form>
      <br />
      {hasSearch ? (
        results.length > 0 ? (
          <ul>
            {results.map((name) => <li key={name}>{name}</li>)}
          </ul>
        ) : (
          <p>未找到匹配结果</p>
        )
      ) : (
        <p>请输入搜索词并点击提交</p>
      )}
    </Layout>
  );
}

关键修改说明 #

• Handler逻辑优化：新增hasSearch标记，仅当q参数非空时才执行搜索过滤，首次加载返回空结果
• 页面状态区分：根据hasSearch值展示不同内容，首次加载提示用户输入，搜索后展示结果或无匹配提示
• 参数处理增强：对q参数做trim()处理，避免用户输入空格触发无效搜索

修改后，首次访问/search不会显示任何结果，只有用户输入内容并点击提交按钮后，才会执行搜索并展示对应结果。

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