検索バー Search Bar

キーワードを入力して検索する入力欄。サジェスト機能と組み合わせることが多い。

使用場面: サイト内検索、商品検索、コンテンツフィルタリング 採用例: Google, Spotify

ライブデモ

ソースコード

<div class="demo-search">
  <div class="demo-search-bar">
    <svg class="demo-search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    <input class="demo-search-input" type="text" placeholder="検索キーワードを入力..." />
    <button class="demo-search-clear" style="display:none;" aria-label="クリア">&times;</button>
  </div>
  <div class="demo-search-suggestions" style="display:none;">
    <div class="demo-search-suggestion">JavaScript チュートリアル</div>
    <div class="demo-search-suggestion">Java 入門</div>
    <div class="demo-search-suggestion">JSON フォーマット</div>
  </div>
</div>

.demo-search { max-width: 400px; position: relative; }
.demo-search-bar {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid #d1d5db; border-radius: 24px; padding: 8px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.demo-search-bar:focus-within {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 15%, transparent);
}
.demo-search-icon { color: #999; flex-shrink: 0; }
.demo-search-bar:focus-within .demo-search-icon { color: var(--ui-primary); }
.demo-search-input {
  flex: 1; border: none; outline: none; font-size: 14px; background: transparent;
}
.demo-search-clear {
  background: none; border: none; font-size: 18px; color: #999;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.demo-search-clear:hover { color: #333; }
.demo-search-suggestions {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  margin-top: 4px; padding: 6px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 10;
}
.demo-search-suggestion {
  padding: 8px 16px; font-size: 13px; color: #444; cursor: pointer;
}
.demo-search-suggestion:hover { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); color: var(--ui-primary); }

(function(){
  const input = document.querySelector('.demo-search-input');
  const clear = document.querySelector('.demo-search-clear');
  const suggestions = document.querySelector('.demo-search-suggestions');
  input.addEventListener('input', function() {
    clear.style.display = this.value ? 'block' : 'none';
    suggestions.style.display = this.value ? 'block' : 'none';
  });
  clear.addEventListener('click', function() {
    input.value = '';
    this.style.display = 'none';
    suggestions.style.display = 'none';
    input.focus();
  });
  document.querySelectorAll('.demo-search-suggestion').forEach(s => {
    s.addEventListener('click', function() {
      input.value = this.textContent;
      suggestions.style.display = 'none';
      clear.style.display = 'block';
    });
  });
})();

AIプロンプト

検索バーをHTML/CSSで作ってください。入力欄に虫眼鏡アイコンが付いた、シンプルな検索UIです。

以下の仕様で検索バーを実装してください。
- 丸みを帯びたデザイン（border-radius大きめ）
- プライマリカラー: #2563eb
- サジェスト（候補一覧）のドロップダウン表示
- クリアボタン（×）
- 検索アイコンのアニメーション
- 入力中のローディングインジケーター

高機能検索バーを実装してください。
- デバウンス付きリアルタイム検索（300ms）
- 検索履歴の表示（localStorage保存）
- キーボードナビゲーション（上下キーで候補選択、Enter確定、ESCで閉じる）
- aria-combobox, aria-autocomplete, role="listbox"
- aria-activedescendant でフォーカス管理
- ハイライト付きマッチング表示
- 日本語IME入力のcompositionイベント対応
- モバイルでは全画面検索モード

← カタログに戻る