【JavaScript】検索欄に入力した文字列にマッチしたリンクを表示

2026年09月24日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

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

以前、コチラ（検索欄に入力した文字列にマッチした項目を表示）の記事にお問い合わせがありました。
「この記事ではテキストが出力されるだけだけど、ハイパーリンクが挿入されたテキストを結果として返したい！」というものでした。

その時は、ご要望どおりにコードを改良して返答しました。
せっかくなので、その内容を記事にしようと思います！

実装例

・ネクストヒューマン株式会社
・桐生印刷株式会社
・ビヨンドソフトウェア
・上毛書店
・テレビ夕焼け株式会社
・モノリス書店
・株式会社ヒューマンスレイブ
・イディオットトライブ株式会社

試しに「書店」「株式会社」「ネクスト」「テレビ」などのワードを検索欄に入れて検索ボタンを押してください。

HTML例

<div class="search">
  <input type="search" id="search-text" name="search" class="searchform" placeholder="入力してください">
  <button id="searchBtn">検索</button>
</div>
<div class="search-area">
  <div class="search-result">
      <div class="search-result__hit-num"></div>
      <div id="search-result__list"></div>
  </div>
</div>
<ul id="targeArea">
  <li data-href="★ここにURLをいれてください★" class="targeItem">・ネクストヒューマン株式会社</li>
  <li data-href="★ここにURLをいれてください★" class="targeItem">・桐生印刷株式会社</li>
  <li data-href="★ここにURLをいれてください★" class="targeItem">・ビヨンドソフトウェア</li>
  <li data-href="★ここにURLをいれてください★" class="targeItem">・上毛書店</li>
  <li data-href="★ここにURLをいれてください★" class="targeItem">・テレビ夕焼け株式会社</li>
  <li data-href="★ここにURLをいれてください★" class="targeItem">・モノリス書店</li>
  <li data-href="★ここにURLをいれてください★" class="targeItem">・株式会社ヒューマンスレイブ</li>
  <li data-href="★ここにURLをいれてください★" class="targeItem">・イディオットトライブ株式会社</li>
</ul>

CSS例

#targeArea{
    display: none;
}
#search-result__list a{
    display: block;
}

JavaScript例

  document.addEventListener('DOMContentLoaded', function() {
      document.addEventListener('click', function(event) {
          if (event.target.id === 'searchBtn') {
              let searchResult = [];
              let searchText = document.querySelector('#search-text').value;
              let targetText;
              let searchResultList = document.querySelector('#search-result__list');
              searchResultList.innerHTML = '';
              let noDataElement = document.querySelector('.noData');
              if (noDataElement) {
                  noDataElement.remove();
              }
              let targetAreaItems = document.querySelectorAll('.targeItem');
              let resultNumber = 0;
              if (searchText !== '') {
                  targetAreaItems.forEach(function(item) {
                      targetText = item.textContent;
                      let setAttr = item.getAttribute('data-href');
                      if (targetText.indexOf(searchText) !== -1) {
                          searchResult.push({ text: targetText, href: setAttr });
                      }
                  });
                  for (let i = 0; i < searchResult.length; i++) {
                      let anchorElement = document.createElement('a');
                      anchorElement.textContent = searchResult[i].text;
                      anchorElement.href = searchResult[i].href;
                      searchResultList.appendChild(anchorElement);
                      resultNumber = searchResultList.querySelectorAll('a').length;
                  }
              }
              if (resultNumber === 0) {
                  let noDataSpan = document.createElement('span');
                  noDataSpan.className = 'noData';
                  noDataSpan.textContent = 'NO DATA';
                  document.querySelector('.search-result').appendChild(noDataSpan);
              }
          }
      });
  });