こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は検索機能で役立つtipsを紹介します！

実装例

• text

• text

• text

• text

• text

• text

• text

• text

• text

• text

• text

• text

• text

• text

HTML例

<ul class="p-searchStore__list">
      <li class="p-searchStore__listItem">
          <div class="p-searchStore__text">
            <h3>text</h3>
          </div>
      </li>
      <li class="p-searchStore__listItem">
          <div class="p-searchStore__text">
            <h3>text</h3>
          </div>
      </li>
      <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
    <li class="p-searchStore__listItem">
        <div class="p-searchStore__text">
          <h3>text</h3>
        </div>
    </li>
</ul>

JavaScript例

document.addEventListener('DOMContentLoaded', function () {
  window.addEventListener('load', function () {
    var listNum = document.querySelectorAll('.p-searchStore__listItem').length;
    var searchForm = document.querySelector('body');
    if (!searchForm) return;
    var result = document.createElement('div');
    result.className = 'p-searchStore__resultNum';
    result.textContent = listNum + '件ヒットしました';
    searchForm.insertAdjacentElement('afterend', result);
  });
});

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！