jQueryで要素の簡易検索 #JavaScript

元ネタ

下記の元ネタを自分が使いやすいように色々修正。
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する｜ Tips Note by TAM
動作内容

部分一致で内容を検索。
特定の要素の値を検索。
検索外のものはhide()で非表示。
全角の英数を半角にする。
ボタンを押すか、ENTERキーで検索。
コード

<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='UTF-8'>
    <title>Test</title>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
          integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
    <link href='https://use.fontawesome.com/releases/v5.6.1/css/all.css' rel='stylesheet'>
</head>
<body>


<div class='input-group mb-3'>
    <div id='search-clear' class='input-group-prepend'>
        <button class='input-group-text fas fa-trash-alt'></button>
    </div>
    <input class='form-control' type='text' id='search-text' placeholder='入力してからEnterキーもしくは検索ボタンを押す'/>
    <div id='search-submit' class='search-result input-group-append'>
        <button class='input-group-text search-result__hit-num'></button>
        <button class='input-group-text fas fa-search'></button>
    </div>
</div>
<div class='container'>
    <div class='row target-list'>
        <!-- ここのtarget-valueクラスvalueの値を検索して存在すれば表示、無ければhide()で非表示させる。 -->
        <input class='target-value' type='hidden' value='test'>
        <!-- 1行に複数の値を設定することも出来ます。 -->
        <input class='target-value' type='hidden' value='123'>
        <div class='col-12'>test</div>
    </div>
    <div class='row target-list'>
        <input class='target-value' type='hidden' value='abc'>
        <div class='col-12'>abc</div>
    </div>
    <div class='row target-list'>
        <input class='target-value' type='hidden' value='efg'>
        <div class='col-12'>efg</div>
    </div>
</div>
<!-- CDNですので、オンプレで使う場合は修正 -->
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'
        integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'
        crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'
        integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1'
        crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'
        integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM'
        crossorigin='anonymous'></script>
<!-- javascript 本体 -->
<script type='text/javascript'>
    window.addEventListener('load', function () {
        // 検索関数
        searchWord = function (searchText) {
            // 英数はすべて半角に変更する。
            // https://qiita.com/yamikoo@github/items/5dbcc77b267a549bdbae
            searchText = searchText.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (s) {
                return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
            });
            // 変数の宣言
            let searchResult, targetText, hitNum;
            // 検索結果を格納するための配列を用意
            searchResult = [];
            // 検索結果エリアの表示を空にする
            $('#search-result__list').empty();
            $('.search-result__hit-num').empty();
            if (searchText !== '') {
                // 検索ボックスに値が入ってる場合
                $('.target-list').each(function () {
                    let isShow = false;
                    $(this).find('.target-value').each(function () {
                        targetText = $(this).val();
                        // 検索対象となるリストに入力された文字列が存在するかどうかを判断
                        if (targetText.indexOf(searchText) !== -1) {
                            // 存在する場合はそのリストのテキストを用意した配列に格納
                            searchResult.push(targetText);
                            isShow = true;
                        }
                    });
                    if (!isShow) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
                // ヒットの件数をページに出力
                hitNum = searchResult.length + '件見つかりました。';
                $('.search-result__hit-num').append(hitNum);
            } else {
                // 検索ボックスが空の場合
                $('.target-list').each(function () {
                    // 非表示のものを表示させる。
                    if ($(this).css('display') !== 'block') {
                        $(this).show();
                    }
                });
            }
        };

        // エンターキーを押した時
        $(document).on('keypress', '#search-text', function (e) {
            if (e.which !== 13) return;
            searchWord($('#search-text').val());
        });
        // 検索ボタン
        $(document).on('click', '#search-submit', function (e) {
            searchWord($('#search-text').val());
        });
        // 入力を削除
        $(document).on('click', '#search-clear', function (e) {
            // 入力を削除
            $('#search-text').val('');
            // 全表示
            searchWord('');
        });
    });
</script>
</body>
</html>