質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

843閲覧

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

lll_

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/06/03 06:11

実現したいこと

絞り込み検索機能の実装

前提

ページ構成としては、
トップページに「カテゴリ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の基礎知識が無いので、取り急ぎドットインストールなどで一から知識を得る予定です。
・テラテイル初めての投稿になります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2023/06/03 06:35

キーワード検索は問題なくできているようですが、これとカテゴリ指定を組み合わせると上手くいかない、みたいな話でしょうか?
lll_

2023/06/03 06:52

コメントありがとうございます。 おっしゃる通りです。例えばTOPページ直下に下記のようなリストタグを追加した場合は、キーワード検索すると検索ボックス直下に該当する場合は検索結果が表示されますが、一つ階層が深いカテゴリ内のリストとなるとうまく検索結果が出ない状況です。 <ul class="target-area"> <li>カテゴリ01_りんご100円</li> <li>カテゴリ01_ばなな300円</li> <li>カテゴリ01_みかん500円</li> </ul>
Lhankor_Mhy

2023/06/03 07:04

『一つ階層が深いカテゴリ内のリスト』だと上手くいかないとのことですが、その上手くいかないコードをご提示いただけますか?
lll_

2023/06/03 07:18

『一つ階層が深いカテゴリ内のリスト』については、質問 > 該当のソースコードにて書きました「■HTMLのコード その2(カテゴリの中身)」となります。 ※こちらのコードは実際にはtopには書かれておらず、遷移先のコードという意味で書きております。 ____________________ ■HTMLのコード その2(カテゴリの中身) <ul class="target-area"> <li>カテゴリ01_りんご100円</li> <li>カテゴリ01_ばなな300円</li> <li>カテゴリ01_みかん500円</li> </ul> ____________________ 尚、こちらのコードが書かれているページ(「カテゴリ01」「カテゴリ02」)へは、topページからa hrefタグでリンクが飛ぶ仕組みになっています。
Lhankor_Mhy

2023/06/03 07:26

つまり、別のページの表示をコントロールしたい、という意味でしょうか?
lll_

2023/06/03 07:34

その通りでございます。
guest

回答1

0

絞り込みキーワードをページ移動の際に次のページに渡したい、というようなご質問かと思います。

クエリパラメータを使ってはいかがでしょうか?
location: search プロパティ - Web API | MDN

js

1 // searchWordの実行 2 $('#search-text').on('input', searchWord); 3 const q = new URLSearchParams(location.search).get("q"); 4 $('#search-text').val(decodeURIComponent(q)) 5 $('#search-text').trigger('input'); 6 7 $('.tab').on('click', e => { 8 e.target.search = `?q=${encodeURIComponent($('#search-text').val())}` 9 })

投稿2023/06/03 08:08

Lhankor_Mhy

総合スコア36158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lll_

2023/06/03 08:20

ありがとうございます!試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問