ローディングスピナー付き候補欄

<div class="d03-15-11-search">
          <input type="text" class="d03-15-11-input" placeholder="検索してみてください" aria-label="検索">
          <div class="d03-15-11-panel"></div>
        </div>

.prev.d03-15-11{align-items:flex-start}
        .d03-15-11-search{width:100%;max-width:300px;margin:0 auto}
        .d03-15-11-input{width:100%;box-sizing:border-box;padding:10px 13px;border:1.5px solid #e5e7eb;border-radius:11px;font-size:13.5px;color:#1f2937;outline:none}
        .d03-15-11-input:focus{border-color:#a5b4fc}
        .d03-15-11-panel{margin-top:8px;min-height:20px}
        .d03-15-11-spin{width:16px;height:16px;margin:6px auto;border:2.5px solid #e0e7ff;border-top-color:#4f46e5;border-radius:50%;animation:d1835rot .7s linear infinite}
        @keyframes d1835rot{to{transform:rotate(360deg)}}
        .d03-15-11-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
        .d03-15-11-panel li{padding:7px 10px;background:#f8fafc;border:1px solid #eef2f7;border-radius:7px;font-size:12.5px;color:#374151}

(function(){
        var root=document.querySelector('.d03-15-11');if(!root)return;
        var input=root.querySelector('.d03-15-11-input');
        var panel=root.querySelector('.d03-15-11-panel');
        var data=['お知らせ一覧','導入事例','採用情報'];
        var timer=null,reqId=0;
        input.addEventListener('input',function(){
          var q=input.value.trim();
          var myId=++reqId;
          clearTimeout(timer);
          panel.innerHTML='';
          if(!q)return;
          panel.innerHTML='<div class="d03-15-11-spin"></div>';
          timer=setTimeout(function(){
            if(myId!==reqId)return;
            var hits=data.filter(function(d){return d.indexOf(q)>-1;});
            panel.innerHTML=hits.length?('<ul>'+hits.map(function(h){return '<li>'+h+'</li>';}).join('')+'</ul>'):'';
          },500);
        });
      })();