【Javascript】キーワード検索＆リアルタイム結果表示機能の実装方法 -作って学ぶWeb制作-

    var foodlist = [
        {
            name: '食パン(６枚切り)',
            img: '1.png',
        }, {
            name: '牛肉',
            img: '2.png',
        }, {
            name: '豚肉',
            img: '3.png',
        }, {
            name: 'ブロッコリー',
            img: '4.png',
        }, {
            name: 'りんご',
            img: '5.png',
        }, {
            name: 'バター',
            img: '6.png',
        }, {
            name: 'abc牛乳',
            img: '7.png',
        }, {
            name: ' Bitterコーヒー牛乳',
            img: '8.png',
        },
    ];


    ul = document.getElementById('search-list');
    var addLists = function (items) {
        const path = "image/"
        var html = '';
        for (i = 0; i < items.length; i++) {
            html += '<li class="search-item"><p>' + items[i].name + '</p>' +
                '<img src="' + path + items[i].img + '" alt="">';
        }
        // HTMLに出力
        ul.insertAdjacentHTML('afterbegin', html);
    }
    addLists(foodlist);


    const searchBox = document.getElementById('search-box');
    const listItems = document.querySelectorAll('.search-item');


    // 全角ひらがなに変換
    function convertString(str) {
        return str
            .replace(/[\u30a1-\u30f6]/g, match =>
                // 全角カタカナをひらがなに変換
                String.fromCharCode(match.charCodeAt(0) - 0x60))
            // 全角文字を半角に変換
            .normalize('NFKC')
            // 英数字を小文字に変換
            .toLowerCase();
    }


    // 検索ボックスの入力イベントで実行
    searchBox.addEventListener('input', function () {
        const query = convertString(searchBox.value);
        const inputwords = query.split(/[\s\u3000]+/).filter(inputword => inputword);


        if (query.trim() === '') {
            for (i = 0; i < listItems.length; i++) {
                listItems[i].classList.remove('hidden');
            }
        } else {
            // 検索ワードの値がある場合、配列各要素に対して処理を行う
            for (i = 0; i < listItems.length; i++) {
                const itemname = convertString(listItems[i].textContent);
                const hit = inputwords.some(inputword => itemname.includes(inputword));
                if (hit) {
                    listItems[i].classList.remove('hidden');
                } else {
                    // ヒット0の場合hiddenクラスを追加で非表示
                    listItems[i].classList.add('hidden');
                }
            }
        }
    });