Reactで、検索欄に前回の検索語を候補として出す方法

export const STORAGE_KEY = 'search-history';
export const MAX_HISTORY = 5;

// 新しい語を先頭に入れる。同じ語は前の位置から外し、件数は MAX_HISTORY まで
export function addTerm(history: string[], term: string): string[] {
  const t = term.trim();
  if (t === '') return history;
  return [t, ...history.filter((h) => h !== t)].slice(0, MAX_HISTORY);
}

// 読めない値や壊れた値は、履歴なしとして扱う
export function loadHistory(): string[] {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (raw === null) return [];
    const value: unknown = JSON.parse(raw);
    if (!Array.isArray(value)) return [];
    return value.filter((v): v is string => typeof v === 'string').slice(0, MAX_HISTORY);
  } catch {
    return [];
  }
}

export function saveHistory(history: string[]): void {
  try {
    if (history.length === 0) localStorage.removeItem(STORAGE_KEY);
    else localStorage.setItem(STORAGE_KEY, JSON.stringify(history));
  } catch {
    // 保存できなくても、検索そのものは止めない
  }
}

「  猫 ごはん  」（前後に空白）を入力して Enter
  → 入力欄「猫 ごはん」 | 候補なし（閉じている） | フォーカス: 入力欄 | 「猫 ごはん」で検索しました | 保存: ["猫 ごはん","キャットタワー","猫 爪とぎ"]
空白だけを入力して Enter
  → 入力欄「   」 | 候補[猫 ごはん / キャットタワー / 猫 爪とぎ] | フォーカス: 入力欄 | 「猫 ごはん」で検索しました | 保存: ["猫 ごはん","キャットタワー","猫 爪とぎ"]
「猫砂」「猫 おもちゃ」「猫 ベッド」を続けて検索し、入力欄を空にする
  → 入力欄「」 | 候補[猫 ベッド / 猫 おもちゃ / 猫砂 / 猫 ごはん / キャットタワー] | フォーカス: 入力欄 | 「猫 ベッド」で検索しました | 保存: ["猫 ベッド","猫 おもちゃ","猫砂","猫 ごはん","キャットタワー"]

保存されていた値 not json で開いて入力欄にフォーカス（ページのエラー: 0件）
  → 入力欄「」 | 候補なし（閉じている） | フォーカス: 入力欄 | まだ検索していません | 保存: not json
保存されていた値 {"term":"猫"} で開いて入力欄にフォーカス（ページのエラー: 0件）
  → 入力欄「」 | 候補なし（閉じている） | フォーカス: 入力欄 | まだ検索していません | 保存: {"term":"猫"}
保存されていた値 [1,"猫 ごはん",null,"猫砂"] で開いて入力欄にフォーカス（ページのエラー: 0件）
  → 入力欄「」 | 候補[猫 ごはん / 猫砂] | フォーカス: 入力欄 | まだ検索していません | 保存: [1,"猫 ごはん",null,"猫砂"]

import { useState } from 'react';
import { addTerm, loadHistory, saveHistory } from './history';

export function useSearchHistory() {
  // 最初の描画のときに一度だけ localStorage から読む
  const [history, setHistory] = useState<string[]>(loadHistory);

  // 書くたびに localStorage から読み直してから変える。
  // ほかのタブが足した語を、古い state で上書きしないため
  function update(change: (current: string[]) => string[]) {
    const next = change(loadHistory());
    saveHistory(next);
    setHistory(next);
  }

  return {
    history,
    add: (term: string) => update((h) => addTerm(h, term)),
    remove: (term: string) => update((h) => h.filter((t) => t !== term)),
    clear: () => update(() => []),
  };
}

### 2つのタブで検索する：書く前に localStorage を読み直す版（useSearchHistory）
タブBで「猫砂」を検索
  → 入力欄「猫砂」 | 候補なし（閉じている） | フォーカス: 入力欄 | 「猫砂」で検索しました | 保存: ["猫砂","猫 ごはん"]
タブAで「猫 爪とぎ」を検索し、入力欄を空にする
  → 入力欄「」 | 候補[猫 爪とぎ / 猫砂 / 猫 ごはん] | フォーカス: 入力欄 | 「猫 爪とぎ」で検索しました | 保存: ["猫 爪とぎ","猫砂","猫 ごはん"]

### 2つのタブで検索する：state から計算して書く版
タブBで「猫砂」を検索
  → 入力欄「猫砂」 | 候補なし（閉じている） | フォーカス: 入力欄 | 「猫砂」で検索しました | 保存: ["猫砂"]
タブAで「猫 爪とぎ」を検索し、入力欄を空にする
  → 入力欄「」 | 候補[猫 爪とぎ / 猫 ごはん] | フォーカス: 入力欄 | 「猫 爪とぎ」で検索しました | 保存: ["猫 爪とぎ","猫 ごはん"]

import { useRef, useState } from 'react';
import { useSearchHistory } from './useSearchHistory';

type Props = { onSearch: (term: string) => void };

export function SearchBox({ onSearch }: Props) {
  const { history, add, remove, clear } = useSearchHistory();
  const [query, setQuery] = useState('');
  const [open, setOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  // 入力中の文字を含む履歴だけを出す。空欄なら全部
  const q = query.trim();
  const suggestions = history.filter((term) => term.includes(q) && term !== q);

  // 押したボタンは閉じた一覧と一緒に消えるので、フォーカスを入力欄に戻す
  function focusInput() {
    inputRef.current?.focus();
  }

  function search(term: string) {
    const t = term.trim();
    if (t === '') return;
    focusInput();
    add(t);
    setQuery(t);
    setOpen(false);
    onSearch(t);
  }

  function removeTerm(term: string) {
    remove(term);
    focusInput();
  }

  function clearAll() {
    clear();
    focusInput();
  }

  return (
    <form
      role="search"
      className="search"
      onSubmit={(e) => {
        e.preventDefault();
        search(query);
      }}
      // フォーカスが form の外へ出たときだけ閉じる。候補のボタンへ移るときは閉じない
      onFocus={() => setOpen(true)}
      onBlur={(e) => {
        if (!e.currentTarget.contains(e.relatedTarget)) setOpen(false);
      }}
      onKeyDown={(e) => {
        if (e.key === 'Escape') setOpen(false);
      }}
    >
      <input
        ref={inputRef}
        type="search"
        aria-label="検索語"
        autoComplete="off"
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          setOpen(true);
        }}
      />
      <button type="submit">検索</button>
      {open && suggestions.length > 0 && (
        <section className="history" aria-label="最近の検索">
          <ul>
            {suggestions.map((term) => (
              <li key={term}>
                <button type="button" className="term" onClick={() => search(term)}>
                  {term}
                </button>
                <button
                  type="button"
                  className="remove"
                  aria-label={`「${term}」を履歴から消す`}
                  onClick={() => removeTerm(term)}
                >
                  ×
                </button>
              </li>
            ))}
          </ul>
          <button type="button" className="clear" onClick={clearAll}>
            履歴をすべて消す
          </button>
        </section>
      )}
    </form>
  );
}

      <input
        type="search"
        aria-label="検索語"
        autoComplete="off"
        value={query}
        onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)} // 入力欄からフォーカスが外れたら、すぐ閉じる
      />

### マウスで候補を押す：form の onBlur で、フォーカスが form の外へ出たときだけ閉じる版（SearchBox）
候補「猫 爪とぎ」の位置でマウスのボタンを押す（まだ離さない）
  → 入力欄「」 | 候補[猫 ごはん / 猫 爪とぎ / キャットタワー] | フォーカス: 猫 爪とぎ | まだ検索していません | 保存: ["猫 ごはん","猫 爪とぎ","キャットタワー"]
マウスのボタンを離す
  → 入力欄「猫 爪とぎ」 | 候補なし（閉じている） | フォーカス: 入力欄 | 「猫 爪とぎ」で検索しました | 保存: ["猫 爪とぎ","猫 ごはん","キャットタワー"]

### マウスで候補を押す：入力欄の onBlur ですぐ閉じる版
候補「猫 爪とぎ」の位置でマウスのボタンを押す（まだ離さない）
  → 入力欄「」 | 候補なし（閉じている） | フォーカス: body（どこにもない） | まだ検索していません | 保存: ["猫 ごはん","猫 爪とぎ","キャットタワー"]
マウスのボタンを離す
  → 入力欄「」 | 候補なし（閉じている） | フォーカス: body（どこにもない） | まだ検索していません | 保存: ["猫 ごはん","猫 爪とぎ","キャットタワー"]

### キーボードで候補を選ぶ：form の onBlur で、フォーカスが form の外へ出たときだけ閉じる版（SearchBox）
Tab
  → 入力欄「」 | 候補[猫 爪とぎ / 猫 ごはん / キャットタワー] | フォーカス: 猫 爪とぎ | まだ検索していません | 保存: ["猫 爪とぎ","猫 ごはん","キャットタワー"]
Enter
  → 入力欄「猫 爪とぎ」 | 候補なし（閉じている） | フォーカス: 入力欄 | 「猫 爪とぎ」で検索しました | 保存: ["猫 爪とぎ","猫 ごはん","キャットタワー"]

### キーボードで候補を選ぶ：入力欄の onBlur ですぐ閉じる版
Tab
  → 入力欄「」 | 候補なし（閉じている） | フォーカス: 検索 | まだ検索していません | 保存: ["猫 ごはん","猫 爪とぎ","キャットタワー"]

### キーボードで履歴を1件消す：押したあとに入力欄へフォーカスを戻す版（SearchBox）
Enter
  → 入力欄「」 | 候補[猫 ごはん / キャットタワー] | フォーカス: 入力欄 | まだ検索していません | 保存: ["猫 ごはん","キャットタワー"]

### キーボードで履歴を1件消す：フォーカスを戻さない版
Enter
  → 入力欄「」 | 候補[猫 ごはん / キャットタワー] | フォーカス: body（どこにもない） | まだ検索していません | 保存: ["猫 ごはん","キャットタワー"]

「猫 」と入力
  → 入力欄「猫 」 | 候補[猫 ベッド / 猫 おもちゃ / 猫砂 / 猫 ごはん] | フォーカス: 入力欄 | 「猫 ベッド」で検索しました | 保存: ["猫 ベッド","猫 おもちゃ","猫砂","猫 ごはん","キャットタワー"]

- main:
  - search:
    - searchbox "検索語"
    - button "検索"
    - region "最近の検索":
      - list:
        - listitem:
          - button "猫 ごはん"
          - button "「猫 ごはん」を履歴から消す": ×

「履歴をすべて消す」を押す
  → 入力欄「」 | 候補なし（閉じている） | フォーカス: 入力欄 | まだ検索していません | 保存: null