カテゴリ別グループ化候補

<div class="d03-15-03-search">
          <input type="text" class="d03-15-03-input" placeholder="検索キーワード" aria-label="検索">
          <div class="d03-15-03-groups"></div>
        </div>

.prev.d03-15-03{align-items:flex-start}
        .d03-15-03-search{width:100%;max-width:300px;margin:0 auto}
        .d03-15-03-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-03-input:focus{border-color:#a5b4fc}
        .d03-15-03-groups{margin-top:8px;display:flex;flex-direction:column;gap:8px}
        .d03-15-03-gh{font-size:10.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px}
        .d03-15-03-groups ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
        .d03-15-03-groups 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-03');if(!root)return;
        var input=root.querySelector('.d03-15-03-input');
        var box=root.querySelector('.d03-15-03-groups');
        var data={
          '記事':['SEO対策の基本','ブログ運用のコツ'],
          '商品':['ホスティングプラン A','ホスティングプラン B'],
          'ページ':['会社概要','お問い合わせ']
        };
        input.addEventListener('input',function(){
          var q=input.value.trim();
          box.innerHTML='';
          if(!q)return;
          Object.keys(data).forEach(function(cat){
            var hits=data[cat].filter(function(d){return d.indexOf(q)>-1;});
            if(!hits.length)return;
            var wrap=document.createElement('div');
            wrap.innerHTML='<p class="d03-15-03-gh">'+cat+'</p><ul>'+hits.map(function(h){return '<li>'+h+'</li>';}).join('')+'</ul>';
            box.appendChild(wrap);
          });
        });
      })();