Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
サイト内検索を作ろうと思うと、データベースとの連携設定が必要だったりと、なかなか苦戦しますが簡易的な絞り込み検索であれば、JavaScriptで実装可能です。
この記事では、そんな絞り込みのインスタント検索をJavaScriptで実装します。
.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;
}
}さいごに
以下の記事も、ネイティブなJavaScriptの絞り込み検索のスニペットです。
デザインや挙動が少し異なるので、好みに応じて利用ください。
JavaScriptのコピペでできる簡易的な絞り込み検索のスニペット
