検索ボックスを作った[MIIcode制作記]

今作ってるサイトに検索ボックスがほしいなと思ったので、様々なサイトを参考に作ってみた。

主に参考にさせて頂いたサイトはこちら。
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する

やりたいことは、検索ボックスに文字を入力すると、入力された文字にマッチした要素のみが表示され、それ以外は非表示になるというもの。

たとえば、検索ボックスに「MIINO」と入力したら、MIINOが表示されて、MOONくんは非表示になるような感じのものが作りたかった。

コードはこんな感じになった。

$(function () {

    $("#searchBox").on('input', function(){

        var search = $("#searchBox").val();
        $(".itemList>li").each(function() {

            if ($(this).text().indexOf(search) != -1) {
                $(this).show();
            } else {
                $(this).hide();
            }

        });
    });
});

$(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()が来るのかな。処理を繰り返し行いたいから、ってのはわかるんだけど、いまいちピンとこないんだ。もう少し知識が増えて来たら、あぁそうか！ってわかるようになるかな。なるといいな～。

参考にさせて頂いたサイト