今作ってるサイトに検索ボックスがほしいなと思ったので、様々なサイトを参考に作ってみた。
主に参考にさせて頂いたサイトはこちら 。
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する
やりたいことは、検索ボックスに文字を入力すると、入力された文字にマッチした要素のみが表示され、それ以外は非表示になるというもの。
たとえば、検索ボックスに「MIINO」と入力したら、MIINOが表示されて、MOONくんは非表示になるような感じのものが作りたかった。

コードはこんな感じになった。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function () { $("#searchBox").on('input', function(){ var search = $("#searchBox").val(); $(".itemList>li").each(function() { if ($(this).text().indexOf(search) != -1) { $(this).show(); } else { $(this).hide(); } }); }); }); |

繰り返しの処理の所が、実はいまいちよくわかっていない。どうしてここに、each()が来るのかな。処理を繰り返し行いたいから、ってのはわかるんだけど、いまいちピンとこないんだ。もう少し知識が増えて来たら、あぁそうか!ってわかるようになるかな。なるといいな~。
参考にさせて頂いたサイト
Comments are closed.