候補ゼロ件時フォールバック提案

<div class="d03-15-12-search">
          <input type="text" class="d03-15-12-input" placeholder="架空のキーワードを入力" aria-label="検索">
          <div class="d03-15-12-panel"></div>
        </div>

.prev.d03-15-12{align-items:flex-start}
        .d03-15-12-search{width:100%;max-width:300px;margin:0 auto}
        .d03-15-12-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-12-input:focus{border-color:#a5b4fc}
        .d03-15-12-panel{margin-top:8px}
        .d03-15-12-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
        .d03-15-12-panel li{padding:7px 10px;background:#f8fafc;border:1px solid #eef2f7;border-radius:7px;font-size:12.5px;color:#374151}
        .d03-15-12-empty{font-size:12px;color:#94a3b8;margin:0 0 6px}

(function(){
        var root=document.querySelector('.d03-15-12');if(!root)return;
        var input=root.querySelector('.d03-15-12-input');
        var panel=root.querySelector('.d03-15-12-panel');
        var data=['料金プラン','よくある質問','会社概要'];
        var fallback=['人気の記事ランキング','お問い合わせフォーム','サービス一覧'];
        input.addEventListener('input',function(){
          var q=input.value.trim();
          panel.innerHTML='';
          if(!q)return;
          var hits=data.filter(function(d){return d.indexOf(q)>-1;});
          if(hits.length){
            panel.innerHTML='<ul>'+hits.map(function(h){return '<li>'+h+'</li>';}).join('')+'</ul>';
          }else{
            panel.innerHTML='<p class="d03-15-12-empty">「'+q+'」に一致する候補はありません。こちらもご覧ください:</p><ul>'+fallback.map(function(h){return '<li>'+h+'</li>';}).join('')+'</ul>';
          }
        });
      })();