.toLowerCase

JavaScriptの.toLowerCaseで絞り込みインスタント検索

2022年1月3日2022年3月21日 4分

サイト内検索を作ろうと思うと、データベースとの連携設定が必要だったりと、なかなか苦戦しますが簡易的な絞り込み検索であれば、JavaScriptで実装可能です。

この記事では、そんな絞り込みのインスタント検索をJavaScriptで実装します。

.toLowerCase
絞り込みインスタント検索のサンプル
絞り込みインスタント検索のコード
- CSS
さいごに

.toLowerCase

JavaScriptの toLowerCase() は、呼び出す文字列の値を小文字に変換して返すメソッドです。

単独で何かを行うものではなく、この記事のインスタント検索では検索窓に入力された文字をこのメソッドで入力し、その結果を返すように使用しています。

絞り込みインスタント検索のサンプル

早速、絞り込みインスタント検索のサンプルです。

上部の検索ボックスに絞り込みをかけたい用語を入力することで、下部の都道府県や用語から絞り込みの検索が実行されます。

東京
大阪
北海道
沖縄
千葉
愛知
埼玉
福岡
広島
神奈川
青森
秋田
茨城
兵庫
京都
abcde
1234567890

かかかず

部分一致でも検索に引っかかる仕組みです。

絞り込みインスタント検索のコード

HTMLのinputタグに、キーボードのいずれかのキーを入力して放した時にonkeyupイベントを設置して、javaSearch() の関数が発動します。

<div class="searchContainer">
    <input type="search" id="input" onkeyup="javaSearch()" placeholder="Search">
    <ul class="items-container">
        <li class="item">
            <p>東京</p>
        </li>
        <li class="item">
            <p>大阪</p>
        </li>
        <li class="item">
            <p>北海道</p>
        </li>
        <li class="item">
            <p>沖縄</p>
        </li>
        <li class="item">
            <p>千葉</p>
        </li>
        <li class="item">
            <p>愛知</p>
        </li>
        <li class="item">
            <p>埼玉</p>
        </li>
        <li class="item">
            <p>福岡</p>
        </li>
        <li class="item">
            <p>広島</p>
        </li>
        <li class="item">
            <p>神奈川</p>
        </li>
        <li class="item">
            <p>青森</p>
        </li>
        <li class="item">
            <p>秋田</p>
        </li>
        <li class="item">
            <p>茨城</p>
        </li>
        <li class="item">
            <p>兵庫</p>
        </li>
        <li class="item">
            <p>京都</p>
        </li>
        <li class="item">
            <p>abcde</p>
        </li>
        <li class="item">
            <p>1234567890</p>
        </li>
    </ul>
</div>

次にJavaScriptのコードは、HTMLで発動させる javaSearch() の定義で「item」のclass名の入れ子の p タグを検索対象として見ます。

function javaSearch() {
  document.querySelectorAll('.item').forEach(item => item.querySelectorAll('p')[0].innerText.toLowerCase().indexOf(document.querySelector('#input').value.toLowerCase()) > -1 ? item.style.display = 'inline-block' : item.style.display = 'none');
}

かかかず

HTML・JavaScript共に簡素な記述内容なので、カスタマイズもしやすいスニペットです。

CSS

検索窓や各要素の見た目やデザインについては、CSSで整えましょう。

以下は、この記事のサンプルでご紹介した絞り込み検索のCSSです。カスタマイズするなりして使ってみてください。

.searchContainer {
  width: 100%;
}
.searchContainer input[type=search] {
  border: 1px solid #eee;
  padding: 12px 15px;
  display: block;
  width: 100%;
  border-radius: 9999px;
  outline: none;
  margin-bottom: 15px;
}
.searchContainer ul.items-container {
    padding: 0;
    border: none;
    margin: 0;
}
.searchContainer .items-container .item {
  padding: 3px 15px;
  background-color: #f1f1f1;
  color: #313131;
  border-radius: 2px;
  margin-bottom: 10px;
animation: fadeIn 0.7s ease 0s 1 normal;
display: inline-block;
}
.searchContainer .items-container .item p {
    margin: 2px 0;
    font-size: 1rem;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}