パーツ番号 11-05-10 ・ JavaScript使用

検索履歴タグ

最近使った検索キーワードをタグとして並べ、クリックで再検索したような挙動を再現。WordPressのサイト内検索フォーム周りの補助UIに使えます。

clickjsinput

プレビュー

ソースコード

HTML

<div class="d11-05-10-wrap">
          <p class="d11-05-10-label">最近の検索</p>
          <div class="d11-05-10-tags" id="d490Tags">
            <span class="d11-05-10-tag">木製デスク</span>
            <span class="d11-05-10-tag">北欧 椅子</span>
            <span class="d11-05-10-tag">収納ラック</span>
            <span class="d11-05-10-tag">LEDライト</span>
          </div>
          <p class="d11-05-10-result" id="d490Result">タグをクリックすると再検索します</p>
        </div>

CSS

.prev.d11-05-10{align-items:flex-start;justify-content:flex-start}
        .d11-05-10-wrap{width:100%}
        .d11-05-10-label{font-size:11px;color:#9ca3af;margin:0 0 8px}
        .d11-05-10-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
        .d11-05-10-tag{font-size:12px;color:#374151;background:#f0f1f4;border-radius:99px;padding:6px 14px;cursor:pointer;transition:background .2s,color .2s}
        .d11-05-10-tag:hover,.d11-05-10-tag.is-active{background:#4f46e5;color:#fff}
        .d11-05-10-result{font-size:12.5px;color:#4f46e5;font-weight:600;margin:0}

JavaScript

(function(){
        var root=document.getElementById('item-11-05-10');
        var tags=root.querySelectorAll('.d11-05-10-tag');
        var result=root.querySelector('#d490Result');
        tags.forEach(function(t){
          t.addEventListener('click',function(){
            tags.forEach(function(x){x.classList.remove('is-active');});
            t.classList.add('is-active');
            result.textContent='「'+t.textContent+'」で再検索しました';
          });
        });
      })();

クラス名 .d11-05-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。