【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法

WEBページ内にFAQコーナーを作っています。
下記のようにプルダウン式で質問部分（Q.）のみを表示させ、回答部分（A.）は非表示にしているのですが
ここに検索機能を掛け合わせて、Q.もしくはA.にヒットする文字列があった場合、
もとのFAQのレイアウトデザインを生かしたまま、ヒットする文字列のあるQ＆Aのみを表示させるには
どのような検索スクリプト、および「search-result」部分のコードを書けばよいのか教えていただけないでしょうか。

とりあえず、現状下記のように記述しているのですが、まずはサーチ機能が走りません。
（当方javaScriptは全然学んでおらず、いろいろなサイトからつぎはぎでコードを持ってきては繋げているので、いらないものが残り、必要なものが欠けている頓珍漢なコードなんだろうと思います　汗）


<style＞
/*-------- search box ----------*/

.search-area input[type="text"] {
padding: 5px 5px 3px;
font-size: 16px;
border: 1px solid #D6D6D6;
}

.search-area input[type="text"]:focus {
background: #F9F9F9;
}
.hit-num__text span {
font-weight: bold;
}
#search-result__list {
}
#search-result__list span {
display: inline-block;
margin-right: 15px;
padding: 5px;
background: #F2F2F2;
}
.target-area .hidden,
{
display: none;
}
/*-------- FAQ アコーディオンメニュー --------*/
.tble_FAQ {
margin: 30px auto; counter-reset: numFaq;
}
.FAQ_body + .FAQ_title {
margin-top: 5px;
}
.FAQ_btn {
position: relative; display: block;
width: 100%; padding: 10px 60px 10px 15px; text-align: left;
background-color: #8f7e68; color: #fff; font-size: 16px;
border: 2px solid #8f7e68;
cursor: pointer; transition: .25s;
}
.FAQ_btn:before {
display: inline-block; float: left; margin: 0 10px 10px 0; width: 30px; background: tan;
padding: 3px; text-align: center;
line-height: 30px; font-size: 18px; font-family: sans-serif; color: white; font-weight: 800;
counter-increment: numFaq;
content: "Q" counter(numFaq) ".";
}
.FAQ_btn:after {
content: '＋'; position: absolute; display: block;
top: 10px; right: 24px; font-size: 24px; font-family: sans-serif; font-weight: 1200; line-height: 30px;
}
.FAQ_btn:focus,
.FAQ_btn:hover {
background-color: #fff;
color: #8f7e68;
}
.FAQ_btn--active::after {
content: none;
}
.FAQ_body {
display: none;
padding: 14px;
border: 1px solid #ddd;
}
.FAQ_body > *:last-child {
margin-bottom: 0;
}
.FAQ_body--active {
display: block;
}
.FAQ_text {
margin-bottom: 20px;
font-size: 1.6rem;
}
</style>

<!--検索窓-->
<div class="search-area">
<form onsubmit="return false;">
<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>
<!--検索窓のスクリプト-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ea …
<script>
//　検索ボックス
$(function () {
searchWord = function(){
var searchText = $(this).val(), // 検索ボックスに入力された値
targetText;

$('.target-area td,dd').each(function() {
targetText = $(this).text();

// 検索対象となるリストに入力された文字列が存在するかどうかを判断
if (targetText.indexOf(searchText) != -1) {
$(this).removeClass('hidden');
} else {
$(this).addClass('hidden');
}
});
};

// searchWordの実行
$('#search-text').on('input', searchWord);
});


<script>//FAQプルダウンのscript
$(document).ready(function () {
$(".FAQ_btn").on("click", function(){
$(this).toggleClass("FAQ_btn--active");
$(this).parent("dt").next().toggleClass("FAQ_body--active");
});
});
</script>
<div class="target-area tble_FAQ ">
<dl>
<dt class="FAQ_title">
<button class="FAQ_btn" type="button">あなたの好きな果物は</button>
</dt>
<dd class="FAQ_body">
<p class="FAQ_text">
リンゴとバナナ
</p>
</dd>
<dt class="FAQ_title">
<button class="FAQ_btn" type="button">あなたの好きな料理は</button>
</dt>
<dd class="FAQ_body">
<p class="FAQ_text">
リンゴパイ、ピザ、魚
</p>
</dd>
<dt class="FAQ_title">
<button class="FAQ_btn" type="button">あなたのペットはなんですか</button>
</dt>
<dd class="FAQ_body">
<p class="FAQ_text">
金魚
</p>
</dd>
</dl>
</div>

No.2 ベストアンサー 回答者： fujillin 回答日時： 2023/09/06 18:09

こんばんは

複雑に作ってあるのでよくわかりませんけれど・・・

『検索ワードを含むdt、dd要素以外にはhiddenクラスを設定する』
ということで良いのでしょうかね。

いろいろありそうですが、以下のようにすることでとりあえずは動作すると思います。
※ inputイベントだとうるさいので、changeに変えてあります。
※ スクリプトの位置はご提示の位置のままと想定しています。
※ hiddenクラスを操作しているだけなので、開閉状態はそのままです。

<script>
//　検索ボックス
$('.search-area input').on('change', function() {
const searchText = this.value;
$('.tble_FAQ dt').each( function() {
const list = $(this).add($(this).next('dd'));
const f = list.text().indexOf(searchText)<0;
list[f?'addClass':'removeClass']('hidden');
});
});
</script>

この回答へのお礼

ありがとうございます！
「dt」の中だけでなく「dd」の中身も検索対象にしたかったので、下記のようにしてみました。
//　検索ボックス
$('.search-area input').on('change', function() {
const searchText = this.value;
$('.tble_FAQ dt,dd').each( function() {
const list = $(this).add($(this).next('dd'));
const f = list.text().indexOf(searchText)<0;
list[f?'addClass':'removeClass']('hidden');
});
});
また、別のところから持ってきていたために、2つに分けて書いていた、検索ボックスのスクリプトと、プルダウンのスクリプトは、ひとまとめにしました。（そういう書き方からよくわかっていなかったもので・・・）

でもって、教えていただいたスクリプトが「何をしているのか」については第1回答者さんが教えてくれたサイトなど見つつ、考えてみます。
htmlとCSSのみしか分かっておらず、JavaScriptをたまに使う必要に迫られたときは丸っとコピー（最低限のアレンジ）、でその場しのぎをしていたので、そろそろもう少し「わかる」ようにがんばります。

お礼日時：2023/09/07 10:26

No.1 回答者： Ogre7077 回答日時： 2023/09/06 17:39

> .target-area .hidden, {

構文エラーです
セレクター構文について勉強しましょう
https://developer.mozilla.org/ja/docs/Web/CSS/Se …

> $('.target-area td,dd').each(
要素名は td ではなく dt ではないでしょうか?
ご提示の構造ですと dt と dd は一体のはずなので、ここは dt だけで検索しましょう

> targetText.indexOf(searchText)
dt だけで検索するので targetText には隣接する要素の dd の内容を足し合わせましょう
参考)
https://api.jquery.com/next/

> $(this).removeClass('hidden');
dt に隣接する要素の dd も一緒に書式を付けましょう
参考)
https://developer.mozilla.org/ja/docs/Web/CSS/Ad …

> 「search-result」部分
よくわかりませんが、関数 searchWord の結果から統計値を取り、表示しては如何でしょうか

この回答へのお礼

ありがとうございます。参考になるページの紹介、勉強になります。
まずは読んで試してみて、わからなかったら、またこちらに質問いたします。。。まだまだ道は遠い感じです。

お礼日時：2023/09/06 17:54