JavaScriptのコピペでできる簡易的な絞り込み検索のスニペット

2021年4月18日 7分

サイト内の検索は条件設定やデータベースの連動が必要だったりと、なかなか手強い機能です。ですが、データ量が多い場合検索があるのとないのとではユーザーのストレスに大きな影響を与えるので、ある程度のコンテンツ量がある場合は検索を実装した方がいいと思います。

かかかず

WordPressなどのCMSは、もはや必須です。

この記事は、HTMLとCSSのみの静的なページに検索や絞り込みを設置しようと思った場合に使えそうな、簡単に絞り込み検索ができるスニペットです。

絞り込み検索のサンプル
スニペットのコピペ手順
JavaScriptのコード一式

絞り込み検索のサンプル

早速絞り込み検索のデザインサンプルです。上部の検索ボックスに絞り込みをかけたい用語で、下部のリストの絞り込みが実行される形です。

これぐらいのリストなら、絞り込み機能はいらないかもしれませんが、それぞれの文字数や、リスト数が多い場合、部分一致でも引っかかるので結構便利です。

スニペットのコピペ手順

HTMLをコピペ

以下のHTMLを表示させたい場所にコピペします。

HTML

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="検索したい言葉を入力してください。">
<ul id="myUL">
  <li><a href="#">東京</a></li>
  <li><a href="#">大阪</a></li>
  <li><a href="#">名古屋</a></li>
  <li><a href="#">福岡</a></li>
  <li><a href="#">京都</a></li>
  <li><a href="#">兵庫</a></li>
  <li><a href="#">札幌</a></li>
  <li><a href="#">沖縄</a></li>
  <li><a href="#">千葉</a></li>
</ul>

CSSをコピペ

HTMLのコピペが終わったら、次にCSSをコピペします。

CSS

#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul#myUL li {
    padding: 0;
}
#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #c8e4ff; /* Add a hover effect to all links, except for headers */
}

JavaScriptをコピペ

最後にJavaScriptを body タグのクロージングタグの直前にコピペしましょう。

JavaScript

function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

上記STEP1〜STEP3が完了すれば終了です。きちんと表示されているか確認しましょう。

JavaScriptのコード一式

コード一式は、HTML、CSS、JavaScriptの3つで1セットで、それぞれ表示したい箇所にコピペして使うことができます。

リストの対象になるのは、HTMLの li タグにそれぞれ記載していますが、追加や減らしても動くので、自分のサイトに合わせて変更して利用ください。

コードを表示する

HTML

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="検索したい言葉を入力してください。">
<ul id="myUL">
  <li><a href="#">東京</a></li>
  <li><a href="#">大阪</a></li>
  <li><a href="#">名古屋</a></li>
  <li><a href="#">福岡</a></li>
  <li><a href="#">京都</a></li>
  <li><a href="#">兵庫</a></li>
  <li><a href="#">札幌</a></li>
  <li><a href="#">沖縄</a></li>
  <li><a href="#">千葉</a></li>
</ul>

CSS

#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul#myUL li {
    padding: 0;
}
#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #c8e4ff; /* Add a hover effect to all links, except for headers */
}

JavaScript

function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}