タグ化マルチキーワード検索

<div class="d03-15-08-search">
          <div class="d03-15-08-chips"></div>
          <input type="text" class="d03-15-08-input" placeholder="キーワードを追加" aria-label="検索">
          <ul class="d03-15-08-list"></ul>
        </div>

.prev.d03-15-08{align-items:flex-start}
        .d03-15-08-search{width:100%;max-width:300px;margin:0 auto}
        .d03-15-08-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
        .d03-15-08-chips span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;background:#eef2ff;color:#4338ca;border-radius:14px;font-size:11.5px;font-weight:600}
        .d03-15-08-chips b{cursor:pointer;font-weight:700}
        .d03-15-08-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-08-input:focus{border-color:#a5b4fc}
        .d03-15-08-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
        .d03-15-08-list li{padding:7px 10px;background:#f8fafc;border:1px solid #eef2f7;border-radius:7px;font-size:12.5px;color:#374151;cursor:pointer}
        .d03-15-08-list li:hover{background:#eef2ff}

(function(){
        var root=document.querySelector('.d03-15-08');if(!root)return;
        var input=root.querySelector('.d03-15-08-input');
        var list=root.querySelector('.d03-15-08-list');
        var chips=root.querySelector('.d03-15-08-chips');
        var data=['駅近','ペット可','築浅','駐車場あり','バストイレ別'];
        var selected=[];
        function renderChips(){
          chips.innerHTML=selected.map(function(s){return '<span>'+s+'<b data-s="'+s+'">×</b></span>';}).join('');
        }
        function renderList(){
          var q=input.value.trim();
          list.innerHTML='';
          if(!q)return;
          data.filter(function(d){return d.indexOf(q)>-1 && selected.indexOf(d)===-1;}).forEach(function(d){
            var li=document.createElement('li');li.textContent=d;list.appendChild(li);
          });
        }
        input.addEventListener('input',renderList);
        list.addEventListener('click',function(e){
          var li=e.target.closest('li');
          if(li){selected.push(li.textContent);input.value='';renderChips();renderList();}
        });
        chips.addEventListener('click',function(e){
          if(e.target.tagName==='B'){selected=selected.filter(function(s){return s!==e.target.dataset.s;});renderChips();}
        });
      })();