絞り込み検索機能の実装について【JS初心者】

実現したいこと

絞り込み検索機能の実装

前提

ページ構成としては、
トップページに「カテゴリ01」と「カテゴリ02」のボタンがあり、
ボタンをクリックするとページ遷移。
遷移後のページでリストが表示されるというものです。

今回、加えて「絞り込み検索ボックス」も設け、
キーワード検索すると、「カテゴリ01」と「カテゴリ02」のリスト内からキーワードに該当するリスト内容が、
検索ボックス直下のエリアに表示されるようにしたいと考えています。

発生している問題

JSで要素(カテゴリ01、カテゴリ02のページ内リスト)を検索する指定？と、
検索結果を表示させる場所(検索ボックス直下)を指定？の方法が分からない。

該当のソースコード

■HTMLのコード　その1 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <div class="wrapper"> ・キーワードで検索する <div class="search-area"> <form> <input type="text" id="search-text" placeholder="検索ワードを入力"> </form> <div class="search-result"> <div class="search-result__hit-num"></div> <div id="search-result__list"></div> </div> </div> ・カテゴリ一覧 <div id ="menus"> <a class="tab" href="●●●">カテゴリ01へ</a> <a class="tab" href="●●●">カテゴリ02へ</a> </div> ■HTMLのコード　その2（カテゴリの中身） ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ カテゴリ01 <ul class="target-area"> <li>カテゴリ01_りんご100円</li> <li>カテゴリ01_ばなな300円</li> <li>カテゴリ01_みかん500円</li> </ul> カテゴリ02 <ul class="target-area"> <li>カテゴリ02_いちご100円</li> <li>カテゴリ02_ぶどう300円</li> <li>カテゴリ02_すいか500円</li> </ul> ■CSSのコード ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <style> /* 検索フォーム*/ .search-area input[type="text"] { padding: 5px 5px 3px; font-size: 16px; border: 1px solid #D6D6D6; } .search-area input[type="text"]:focus { background: #F9F9F9; } .search-result { margin-top: 20px; } .hit-num__text span { font-weight: bold; } #search-result__list { margin-top: 15px; } #search-result__list span { display: inline-block; margin-right: 15px; padding: 5px; background: #F2F2F2; } .target-area { margin-top: 50px; } .target-area .hidden { display: none } </style> ■JSのコード ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <script type="text/javascript"> $(function () { searchWord = function(){ var searchText = $(this).val(), // 検索ボックスに入力された値 targetText; $('.target-area li').each(function() { targetText = $(this).text(); // 検索対象となるリストに入力された文字列が存在するかどうかを判断 if (targetText.indexOf(searchText) != -1) { $(this).removeClass('hidden'); } else { $(this).addClass('hidden'); } }); }; // searchWordの実行 $('#search-text').on('input', searchWord); }); </script>

試したこと

$('.target-area li').each(function()の
.target-area li'を触ってみましたが、上手くいかなかった。

補足情報（FW/ツールのバージョンなど）

・JSは参考になりそうなコードを拾ってきました。
・JSの基礎知識が無いので、取り急ぎドットインストールなどで一から知識を得る予定です。
・テラテイル初めての投稿になります。