如何Implement Search Functionality：Claude Code 实战指南

搜索機能の实现を通过 Claude Code 加速

搜索機能は用户体験に直結する重要な機能です。デバウンス処理、ハイライト显示、フィルタリングなど、考慮すべき点が多くあります。使用 Claude Code这らをまとめて实现可以。

インクリメンタルサーチの实现

实时で搜索結果が更新されるインクリメンタルサーチを作ります。

> デバウンス付きのインクリメンタルサーチ组件をReactで作って。
> 搜索結果のキーワードハイライトもお願い。

import { useState, useEffect, useMemo } from "react";

function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}

function highlightText(text: string, query: string) {
  if (!query) return text;
  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
  const parts = text.split(regex);
  return parts.map((part, i) =>
    regex.test(part) ? <mark key={i} className="bg-yellow-200">{part}</mark> : part
  );
}

interface SearchResult {
  id: string;
  title: string;
  description: string;
}

export function SearchBox() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<SearchResult[]>([]);
  const [loading, setLoading] = useState(false);
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (!debouncedQuery) {
      setResults([]);
      return;
    }

    const controller = new AbortController();
    setLoading(true);

    fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`, {
      signal: controller.signal,
    })
      .then((res) => res.json())
      .then((data) => {
        setResults(data.results);
        setLoading(false);
      })
      .catch((err) => {
        if (err.name !== "AbortError") setLoading(false);
      });

    return () => controller.abort();
  }, [debouncedQuery]);

  return (
    <div className="relative w-full max-w-lg">
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search by keyword..."
        className="w-full p-3 border rounded-lg"
      />

      {loading && <div className="absolute right-3 top-3">検索中...</div>}

      {results.length > 0 && (
        <ul className="absolute w-full mt-1 bg-white border rounded-lg shadow-lg max-h-96 overflow-y-auto">
          {results.map((item) => (
            <li key={item.id} className="p-3 hover:bg-gray-50 border-b last:border-0">
              <div className="font-semibold">
                {highlightText(item.title, debouncedQuery)}
              </div>
              <div className="text-sm text-gray-600">
                {highlightText(item.description, debouncedQuery)}
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

服务器サイド：SQL通过搜索API

后端の搜索APIも让 Claude Code依頼可以。

// Next.js App Router APIルート
import { db } from "@/lib/database";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const q = searchParams.get("q") || "";
  const category = searchParams.get("category");
  const page = parseInt(searchParams.get("page") || "1");
  const limit = 20;

  if (q.length < 2) {
    return Response.json({ results: [], total: 0 });
  }

  const where: any = {
    OR: [
      { title: { contains: q, mode: "insensitive" } },
      { content: { contains: q, mode: "insensitive" } },
    ],
  };

  if (category) {
    where.category = category;
  }

  const [results, total] = await Promise.all([
    db.article.findMany({
      where,
      skip: (page - 1) * limit,
      take: limit,
      orderBy: { createdAt: "desc" },
      select: { id: true, title: true, description: true, category: true },
    }),
    db.article.count({ where }),
  ]);

  return Response.json({
    results,
    total,
    totalPages: Math.ceil(total / limit),
  });
}

静的サイトでの客户端搜索

ブ日志や文書サイトなら、构建時に搜索索引を生成する方法が有效です。

// 搜索索引生成スクリプト
import MiniSearch from "minisearch";
import fs from "fs";
import path from "path";

const posts = getAllPosts(); // 文章数据の获取

const miniSearch = new MiniSearch({
  fields: ["title", "content", "tags"],
  storeFields: ["title", "slug", "description"],
  searchOptions: {
    boost: { title: 3, tags: 2 },
    fuzzy: 0.2,
    prefix: true,
  },
});

miniSearch.addAll(posts);

fs.writeFileSync(
  path.join("public", "search-index.json"),
  JSON.stringify(miniSearch.toJSON())
);

正規表現を活用した高度なパターンマッチング相关内容请参阅通过 Claude Code正規表現を创建・调试する方法也可以参考。効率的なプロンプトの書き方は生産性を3倍にする10のTipsで紹介しています。

总结

借助 Claude Code，デバウンス、ハイライト、ファセット搜索といった搜索機能の複雑な要件も、自然言語で伝える只需实现可以。前端から后端まで一貫した设计を短时间で得られます。

详细信息请参阅Claude Code官方文档。