検索候補ハイライト(タイプ中)

<div class="d11-05-06-wrap">
          <input type="text" class="d11-05-06-input" id="d486Input" placeholder="キーワードを入力(例: デ)" value="デ">
          <ul class="d11-05-06-list" id="d486List"></ul>
        </div>

.prev.d11-05-06{align-items:flex-start;justify-content:flex-start}
        .d11-05-06-wrap{width:100%}
        .d11-05-06-input{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;outline:none;margin-bottom:10px}
        .d11-05-06-input:focus{border-color:#6366f1}
        .d11-05-06-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
        .d11-05-06-list li{font-size:13px;color:#374151;background:#f8f9fb;border-radius:8px;padding:8px 12px}
        .d11-05-06-list mark{background:#fef08a;color:#78350f;padding:0 1px;border-radius:2px}

(function(){
        var root=document.getElementById('item-11-05-06');
        var input=root.querySelector('#d486Input');
        var list=root.querySelector('#d486List');
        var words=['デスク 木製','デザインチェア','デジタル時計','テーブルランプ','デスクマット'];
        function render(){
          var q=input.value.trim();
          list.innerHTML='';
          words.forEach(function(w){
            var li=document.createElement('li');
            if(q&&w.indexOf(q)>-1){
              var idx=w.indexOf(q);
              li.innerHTML=w.slice(0,idx)+'<mark>'+w.slice(idx,idx+q.length)+'</mark>'+w.slice(idx+q.length);
            }else{
              li.textContent=w;
            }
            list.appendChild(li);
          });
        }
        input.addEventListener('input',render);
        render();
      })();