フェードイン候補リスト

<div class="d03-15-01-search">
          <div class="d03-15-01-field">
            <svg viewBox="0 0 24 24" width="16" height="16" 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-15-01-input" placeholder="キーワードを入力" aria-label="検索">
          </div>
          <ul class="d03-15-01-list"></ul>
        </div>

.prev.d03-15-01{align-items:flex-start}
        .d03-15-01-search{position:relative;width:100%;max-width:300px;margin:0 auto}
        .d03-15-01-field{display:flex;align-items:center;gap:8px;padding:10px 13px;background:#fff;border:1.5px solid #e5e7eb;border-radius:11px}
        .d03-15-01-input{flex:1;border:0;outline:none;font-size:13.5px;color:#1f2937;background:transparent}
        .d03-15-01-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
        .d03-15-01-list li{padding:8px 11px;background:#f8fafc;border:1px solid #eef2f7;border-radius:8px;font-size:13px;color:#374151;opacity:0;transform:translateY(-4px);animation:d1825in .28s ease forwards}
        @keyframes d1825in{to{opacity:1;transform:translateY(0)}}

(function(){
        var root=document.querySelector('.d03-15-01');if(!root)return;
        var input=root.querySelector('.d03-15-01-input');
        var list=root.querySelector('.d03-15-01-list');
        var data=['WordPress テーマ','WordPress プラグイン','WordPress 高速化','WordPress SEO対策','WordPress 保守運用'];
        input.addEventListener('input',function(){
          var q=input.value.trim();
          list.innerHTML='';
          if(!q)return;
          var hits=data.filter(function(d){return d.indexOf(q)>-1;});
          hits.forEach(function(h,i){
            var li=document.createElement('li');
            li.textContent=h;
            li.style.animationDelay=(i*0.05)+'s';
            list.appendChild(li);
          });
        });
      })();