検索サジェスト(履歴+候補)

<div class="d03-02-10-search">
          <div class="d03-02-10-field">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" class="d03-02-10-input" placeholder="サイト内を検索" aria-label="サイト内検索">
          </div>
          <div class="d03-02-10-panel">
            <p class="d03-02-10-label">最近の検索</p>
            <ul class="d03-02-10-history">
              <li>WordPress 高速化</li>
              <li>お問い合わせ フォーム</li>
            </ul>
            <p class="d03-02-10-label">おすすめ</p>
            <ul class="d03-02-10-suggest">
              <li>料金プラン</li>
              <li>制作実績</li>
              <li>ブログ記事一覧</li>
            </ul>
          </div>
        </div>

.prev.d03-02-10{align-items:flex-start}
        .d03-02-10-search{position:relative;width:100%;max-width:320px;margin:0 auto}
        .d03-02-10-field{display:flex;align-items:center;gap:9px;padding:11px 14px;background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;transition:border-color .2s,box-shadow .2s}
        .d03-02-10-search.open .d03-02-10-field{border-color:#a5b4fc;box-shadow:0 0 0 3px rgba(99,102,241,.14)}
        .d03-02-10-input{flex:1;border:0;outline:none;font-size:14px;color:#1f2937;background:transparent}
        .d03-02-10-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 14px 32px rgba(30,41,59,.14);padding:10px 8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s;z-index:8}
        .d03-02-10-search.open .d03-02-10-panel{opacity:1;visibility:visible;transform:translateY(0)}
        .d03-02-10-label{margin:6px 8px 4px;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em}
        .d03-02-10-panel ul{list-style:none;margin:0 0 4px;padding:0}
        .d03-02-10-panel li{padding:8px 10px;border-radius:7px;font-size:13.5px;color:#374151;cursor:pointer;transition:background .15s}
        .d03-02-10-panel li:hover{background:#eef2ff;color:#4338ca}
        .d03-02-10-history li::before{content:"↩ ";color:#cbd5e1}

(function(){
        var root=document.getElementById('item-03-02-10');
        var box=root.querySelector('.d03-02-10-search');
        var input=root.querySelector('.d03-02-10-input');
        input.addEventListener('focus',function(){box.classList.add('open');});
        document.addEventListener('click',function(e){if(!box.contains(e.target))box.classList.remove('open');});
        root.querySelector('.d03-02-10-panel').addEventListener('click',function(e){
          if(e.target.tagName==='LI'){input.value=e.target.textContent;box.classList.remove('open');}
        });
      })();