ページ内絞り込み検索。検索ボックスの値を取得し、その値と隣接する要素の値を表示したい

Question

前提・実現したいこと

FAQページにて、ページ内の検索機能を実装したいです。
イメージとしては、検索ボックスに検索したいワードを入れたら、すぐ下に検索結果が表示される感じです。

発生している問題・エラーメッセージ

https://www.tam-tam.co.jp/tipsnote/javascript/post11315.html

上記URLを参考に実装してみたのですが、
「dt」か「dd」どちらかの要素しか検索結果に表示させることができませんでした。

検索結果の「dt」に紐付く、「dd」も一緒に結果として表示したいです。

下のソースコードでいうと、「赤」を検索したら、
「<h2>」要素に「赤」、「<p>」要素に「あいうえお」を格納して表示するイメージです。

該当のソースコード

<script type="text/javascript">
　$(function () {
　searchWord = function(){
　var searchResult,
　searchText = $(this).val(), // 検索ボックスに入力された値
　targetText,
　hitNum;

　// 検索結果を格納するための配列を用意
　searchResult = [];

　// 検索結果エリアの表示を空にする
　$('#search-result__list').empty();
　$('.search-result__hit-num').empty();

　// 検索ボックスに値が入ってる場合
　if (searchText != '') {
　　$('.target-area dt').each(function() {
　　　targetText = $(this).text();

　　　// 検索対象となるリストに入力された文字列が存在するかどうかを判断
　　　if (targetText.indexOf(searchText) != -1) {
　　　// 存在する場合はそのリストのテキストを用意した配列に格納
　　　　searchResult.push(targetText);
　　　}
　});

　// 検索結果をページに出力
　for (var i = 0; i < searchResult.length; i ++) {
　　$('<h2>').text(searchResult[i]).appendTo('#search-result__list');
　}

　// ヒットの件数をページに出力
　hitNum = '<span>検索結果</span>：' + searchResult.length + '件見つかりました。';
　　$('.search-result__hit-num').append(hitNum);
　}
};

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

<div style="text-align: center;">
　<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>

<div class="qa">
　<h2 id="q1">受け取りについて</h2>
　　<dl class="target-area">
　　　<dt>赤</dt>
　　　<dd>あいうえお</dd>

　　　<dt>青</dt>
　　　<dd>かきくけこ</dd>

　　　<dt>黄色</dt>
　　　<dd>さしすせそ</dd>
　　</dl>
</div>

試したこと

隣接要素を取得する$(this).next("dd")を使えばいけそうだと思ったのですが、
うまく動作させることができませんでした…。

Comments

[m.ts10806]

> 隣接要素を取得する$(this).next(“dd”)を使えば
“” ←ダブルクォーテーションではないですし全角では？

[vio]

おっしゃる通りでした！修正いたします！

[x_x]

方針はあっていると思いますが、まだうまく動かなかったのでしょうか？

[vio]

```
赤[object Object]
```
のように表示されました…まだうまく動かせません。

[x_x]

next()を試したコードも載せてもらえればどこが問題かわかるかもしれません。

[vio]

試したコードを載せようと思ったのですが、
moredeep様のアンサーを参考に表示ができました！ありがとうございました！

Answer 1

$(this).next("dd")で合っていると思います。ただ、これで取れるのはそのオブジェクトなので、そこから文字列を貰う必要があります。$(this).next("dd").text()
searchResult.push(targetText);をsearchResult.push(targetText + $(this).next("dd").text());としたらとりあえず表示はできるんじゃないかなと思います。

Comments

[vio]

ありがとうございます！
隣接要素を表示するとobjectになってしまうのが分からなかったのですが、解決いたしました！

各要素を指定したタグの中に入れられるよう頑張ってみます！