矢印キーハイライト移動候補

<div class="d03-15-07-search">
          <input type="text" class="d03-15-07-input" placeholder="↑↓キーで選択できます" aria-label="検索">
          <ul class="d03-15-07-list"></ul>
        </div>

.prev.d03-15-07{align-items:flex-start}
        .d03-15-07-search{width:100%;max-width:300px;margin:0 auto}
        .d03-15-07-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-07-input:focus{border-color:#a5b4fc}
        .d03-15-07-list{list-style:none;margin:8px 0 0;padding:0;max-height:130px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
        .d03-15-07-list li{padding:8px 11px;background:#f8fafc;border:1px solid #eef2f7;border-radius:8px;font-size:13px;color:#374151;cursor:pointer}
        .d03-15-07-list li.is-active{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}

(function(){
        var root=document.querySelector('.d03-15-07');if(!root)return;
        var input=root.querySelector('.d03-15-07-input');
        var list=root.querySelector('.d03-15-07-list');
        var data=['契約プラン一覧','契約更新の手続き','契約解除について','会員契約Q&A','個人情報保護方針'];
        var view=[],active=-1;
        function render(){
          var q=input.value.trim();
          view=q?data.filter(function(d){return d.indexOf(q)>-1;}):[];
          list.innerHTML=view.map(function(v,i){return '<li data-i="'+i+'">'+v+'</li>';}).join('');
          active=view.length?0:-1;
          highlight();
        }
        function highlight(){
          [].forEach.call(list.children,function(li,i){li.classList.toggle('is-active',i===active);});
        }
        input.addEventListener('input',render);
        input.addEventListener('keydown',function(e){
          if(!view.length)return;
          if(e.key==='ArrowDown'){e.preventDefault();active=(active+1)%view.length;highlight();var li=list.children[active];if(li)li.scrollIntoView({block:'nearest'});}
          else if(e.key==='ArrowUp'){e.preventDefault();active=(active-1+view.length)%view.length;highlight();var li2=list.children[active];if(li2)li2.scrollIntoView({block:'nearest'});}
          else if(e.key==='Enter'){e.preventDefault();if(active>-1)input.value=view[active];}
        });
        list.addEventListener('click',function(e){var li=e.target.closest('li');if(li){input.value=view[+li.dataset.i];render();}});
      })();