html サイト内検索 javascript

HTMLサイト内検索JavaScriptの活用方法

要約: 本文では、HTMLを用いたサイト内検索機能をJavaScriptで実装する方法について説明します。具体的なコーディング例や、効果的な検索機能の設計について詳しく解説します。

Webサイトでよく見かける検索機能。データベースを構築して実装するイメージがありますが、小規模なサイトやシンプルなデータの場合は、JavaScriptだけで検索機能を実装することも可能です。

今回は、データベースを使わずにJavaScriptで検索機能を実装する方法をご紹介します。HTML、CSS、JavaScriptのコード例を交えながら、分かりやすく解説していきます。

1. 実装例

まずは、実際に動作する検索機能のデモを見てみましょう。

例えば、「書店」「株式会社」「ネクスト」「テレビ」などのキーワードを入力して「検索」ボタンを押してみてください。入力したキーワードにマッチする項目が、下に表示されます。

2. HTML例

検索機能を実装するための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="targetArea">
  <li class="targetItem">・ネクストヒューマン株式会社</li>
  <li class="targetItem">・桐生印刷株式会社</li>
  <li class="targetItem">・ビヨンドソフトウェア</li>
  <li class="targetItem">・上毛書店</li>
  <li class="targetItem">・テレビ夕焼け株式会社</li>
  <li class="targetItem">・モノリス書店</li>
  <li class="targetItem">・株式会社ヒューマンスレイブ</li>
  <li class="targetItem">・イディオットトライブ株式会社</li>
</ul>

<input type="search" ...>: 検索キーワードを入力するためのテキストフィールドです。placeholder属性で入力のヒントを表示しています。

<button id="searchBtn">検索</button>: 検索を実行するためのボタンです。

<div class="search-area">: 検索結果を表示するためのエリアです。

<div class="search-result">: 検索結果の詳細を表示するエリアです。

<div class="search-result__hit-num"></div>: ヒット件数を表示するエリアです。

<div id="search-result__list"></div>: 検索結果のリストを表示するエリアです。

<ul id="targetArea">: 検索対象となるデータのリストです。

<li class="targetItem">: リストの各項目です。

3. CSS例

検索結果表示エリアの初期状態を非表示にし、検索結果をブロック要素として表示するためのCSSは以下のようになります。

#targetArea {
  display: none; /* 検索対象リストを初期状態で非表示にする */
}

#search-result__list span {
  display: block; /* 検索結果をブロック要素として表示する */
}

4. JavaScript例

検索機能を実現するための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'); // 「NO DATA」要素を取得
      if (noDataElement) {
        noDataElement.remove(); // 既存の「NO DATA」要素があれば削除
      }

      let targetAreaItems = document.querySelectorAll('.targetItem'); // 検索対象リストの各項目を取得
      let resultNumber = 0;

      if (searchText !== '') { // 検索キーワードが入力されている場合
        targetAreaItems.forEach(function(item) { // 各項目に対してループ処理
          targetText = item.textContent; // 項目のテキスト内容を取得
          if (targetText.indexOf(searchText) !== -1) { // キーワードが含まれているか判定
            searchResult.push(targetText); // 検索結果配列に追加
          }
        });

        // 検索結果を表示
        for (let i = 0; i < searchResult.length; i++) {
          let spanElement = document.createElement('span'); // 新しいspan要素を作成
          spanElement.textContent = searchResult[i]; // span要素に検索結果を設定
          searchResultList.appendChild(spanElement); // 検索結果表示エリアにspan要素を追加
          resultNumber = searchResultList.querySelectorAll('span').length; // ヒット件数を更新
        }
      }

      // 検索結果が0件の場合
      if (resultNumber === 0) {
        let noDataSpan = document.createElement('span');
        noDataSpan.className = 'noData';
        noDataSpan.textContent = 'NO DATA';
        document.querySelector('.search-result').appendChild(noDataSpan); // 「NO DATA」を表示
      }
    }
  });
});

DOMContentLoadedイベント: HTMLの読み込みが完了したタイミングで処理を実行します。

clickイベント: 検索ボタンがクリックされたタイミングで処理を実行します。

querySelector()メソッド: 指定したセレクタに一致する最初の要素を取得します。

querySelectorAll()メソッド: 指定したセレクタに一致する全ての要素を取得します。

forEach()メソッド: 配列の各要素に対して、指定した関数を順番に実行します。

textContentプロパティ: 要素のテキスト内容を取得または設定します。

indexOf()メソッド: 文字列内で指定した文字列が最初に現れる位置を返します。見つからない場合は -1 を返します。

createElement()メソッド: 指定したタグ名の新しい要素を作成します。

appendChild()メソッド: 指定した要素の子要素として、新しい要素を追加します。

5. まとめ

今回は、JavaScriptだけでシンプルな検索機能を実装する方法をご紹介しました。jQueryなどのライブラリを使用せず、Vanilla.jsで記述することで、より軽量で高速な検索機能を実現できます。

このコード例は、様々なWebサイトで応用可能です。ぜひ、ご自身のサイトに合わせてカスタマイズして活用してみてください！

エラー処理とユーザビリティ

サイト内検索を利用するユーザーの体験を向上させるため、エラーに対する処理や、ユーザビリティを重視した設計について考察します。ユーザーからのフィードバックを反映させた改善方法についても触れます。

以下は、検索結果が見つからなかった場合の処理の例です。

if (filteredData.length === 0) {
    results.innerHTML = "該当する結果が見つかりませんでした。";
}

このように、ユーザーの入力に応じて反応することで、使いやすいインターフェースを提供できます。

参考文献: MDN Web Docs - JavaScriptガイド