JQueryで検索システムを作りたい

###前提・実現したいこと
JQuery初心者レベルのものです。JQueryを使って検索システムのようなものを作りたいと思っているのですが、コードの設計が難しく、お力を貸していただきたいと思っております。

サンプル的なものになりますが、基本的には以下のような感じで、フォームに検索したいワード（例えばヤフー）を入れて検索ボタンを押すと、該当するものが、<a id="display"><a>に属性（リンク）付きで設定・表示され、クリックするとヤフーに飛ぶというような仕様にしたいです。（検索の対象となる候補はリスト形式で記述し、.hide()で隠していますが、他にベターなやり方がありましたら、ご教授願います。）

サンプルコードなどでも構いませんので、製作するヒントをいただければありがたいです。

よろしくお願いいたします。

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>属性の取得/設定</title>
  <script src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  <style>
    .target-area {
      display: none;
    }
  </style>
</head>
<body>
  <body>
    <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>

      <ul class="target-area">
        <li class="address"><a href="https://www.yahoo.co.jp/">ヤフー</a><li>
        <li class="address"><a href="https://www.google.co.jp/">グーグル</a><li>
        <li class="address"><a href="http://www.msn.com/">MSN</a><li>
        <li class="address"><a href="https://www.infoseek.co.jp/">インフォシーク</a><li>
      </ul>
    </div><!-- /.wrapper -->

  </body>
  <script>
  $(function () {
  searchWord = function(){
   var searchResult,
        searchText = $(this).val(), // 検索ボックスに入力された値
        targetText,
        targetTextArray = [],
        targetHref,
        targetHrefArray = [],
        hitNum;

  // 検索結果を格納するための配列を用意
  searchResult = [];
  // 検索結果エリアの表示を空にする
  $('#search-result__list').empty();
  $('.search-result__hit-num').empty();

  // 検索ボックスに値が入ってる場合
  if (searchText != '') {
    $('.target-area li a').each(function() {
      targetText = $(this).text();
      targetTextArray.push(targetText);
      targetHref = $(this).attr('href');
      targetHrefArray.push(targetHref);
      // 検索対象となるリストに入力された文字列が存在するかどうかを判断
      if (targetText.indexOf(searchText) != -1) {
        // 存在する場合はそのリストのテキストを用意した配列に格納
        searchResult.push(targetText);
      }
    });
  
    // 検索結果をページに出力
    for (var i = 0; i < searchResult.length; i++) {
      var univHref = targetHrefArray[targetTextArray.indexOf(searchResult[i])];
      $('<a>').text(searchResult[i]).appendTo('#search-result__list').attr('href', univHref);
    }
    // ヒットの件数をページに出力
    hitNum = searchResult.length + '件のポータルサイトが見つかりました。';
    $('.search-result__hit-num').append(hitNum);
    }
    };
  // searchWordの実行
  $('#search-text').on('input', searchWord);
  });
  </script>
</body>
</html>

###試したこと
いろいろと試行錯誤してみたのですが、ワードだけでなく、属性も合わせて検索・設定しなければならないため、
壁にぶち当たってしまいました…。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答2件

ベストアンサー

検索結果はどのように取得されるおつもりで？
jqueryのみで検索システムが出来るかどうかは目的によりけりですね。。

投稿2017/05/18 13:57

harashow1701

総合スコア854

harashow1701

2017/05/18 14:16

あ、検索結果はリストで用意しているものを隠しているのですね。では、以下の順序でやり方を調べながら身につけてみて下さい。ボタンクリックしたら、hello worldと書かれたアラートが出るようにする方法を学ぶ。ボタンクリックしたら、検索用のテキストボックスに入力された値を取得し、その値をアラートに表示する方法を学ぶ。テキストボックスに入力された値に紐づく検索結果を取得する方法を学ぶ取得した結果をページ内に指定のタグで埋め込む方法を学ぶ分解してやっていきましょう。それでは、スタート！

kozy

2017/05/18 14:32

ありがとうございます！ご教授いただいた方法でやってみようと思います！

kozy

2017/05/18 16:57

検索用のテキストボックスに入力された値を取得してconsole.log()で表示する、までは問題ないのですが、「テキストボックスに入力された値に紐づく検索結果を取得する方法」が難しいですね…。リストから値と属性を両方取得するというのがなかなか上手くいきません…。何かヒントいただけませんでしょうか。上記のような大まかな手順でも構いませんので。よろしくお願いいたします。 ---できたところまでのコード--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>属性の取得/設定</title> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <style> #list { display: none; } </style> </head> <body> <form> <input type="text" id="search_text"> <button id="btn">クリック</button> <output id="display"><output> <ul id="list"> <li id="yahoo"><a href="https://www.yahoo.co.jp/">ヤフー</a><li> <li id="google"><a href="https://www.google.co.jp/">グーグル</a><li> <li id="msn"><a href="http://www.msn.com/">MSN</a><li> </ul> </form> <script> window.onload = function(){ var btn = document.getElementById('btn'); btn.addEventListener('click', function(){ var searchText = document.getElementById('search_text').value; console.log(searchText); }); }; </script> </body> </html>

harashow1701

2017/05/18 17:26

harashow1701

2017/05/18 17:35 編集

スマホからなのでアレですが、とりあえず先に処理を行って行く上で、後から使うセレクターは変数に入れといた方が良いですよ。その上で次のステップは以下。変数listにはul要素とその子孫要素が含まれているので、変数listから小要素のli、孫要素のaにアクセスする方法を調べて学ぶ。孫要素のa要素にアクセスする方法がわかったら、a要素のhref属性の値と要素の間のテキストをそれぞれ取得する方法を調べて学ぶ。これが出来るようになれば、あとは検索ボックスにの入力値とul要素内に含まれる複数のa要素のテキストをループ処理で総当たりさせて、マッチするものを見つけて、該当する値を取得するだけです。

kozy

2017/05/18 17:41

ありがとうございます。やってみます！

kozy

2017/05/19 13:50

度々すみません！孫要素のa要素にアクセスし、a要素のhref属性の値と要素の間のテキストをそれぞれ取得する方法はわかりました。あとはステップ３なのですが、コードの組み立てに悩んでいます。最後もう少しだけヒントいただけませんでしょうか。よろしくお願いいたします。 ---できたところまでのコード--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>属性の取得/設定</title> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <style> #list { display: none; } </style> </head> <body> <form> <input type="text" id="search_text"> <button id="btn">クリック</button> <div id="display"></div> <ul id="list"> <li class="address"><a href="https://www.yahoo.co.jp/">ヤフー</a><li> <li class="address"><a href="https://www.google.co.jp/">グーグル</a><li> <li class="address"><a href="http://www.msn.com/">MSN</a><li> </ul> </form> <script> window.onload = function(){ var btn = document.getElementById('btn'); btn.addEventListener('click', function(){ var searchResult = []; var searchText = document.getElementById('search_text').value; //console.log(searchText); var address = document.getElementsByClassName('address'); //a要素のhref属性の値と要素の間のテキストをそれぞれ取得 for(i = 0; i < address.length; i++){ var address_array = address[i].firstChild.getAttribute('href'); var potalSite = address[i].firstChild.textContent; //console.log(potalSite); } // 検索対象となるリストに入力された文字列が存在するかどうかを判定 if(potalSite.indexOf(searchText) != -1){ searchResult.push(searchText); } //console.log(searchResult); }); }; </script> </body> </html>

harashow1701

2017/05/19 14:28

>コードの組み立てに悩んでいます悩んでいるとは？

harashow1701

2017/05/19 14:31

``` test ```

harashow1701

2017/05/19 14:33 編集

コメント欄だとコードブロックきかないみたいなので、普通に質問本文に追記で新しいコードを```で上下囲って入れてください。何がうまくいってて、何が上手くいってないのかを明確に書いてください。console.logで書き出している部分が望んでいる値になっていないのであれば、そこも明確にかいてください。

harashow1701

2017/05/19 14:36

あとは最終的に、<div id="display"></div>の間がどうなっていたら良いのかも書いてみてください。 (例)<div id="display"><a href="xxx">xxx</a></div>

kozy

2017/05/21 10:17

説明不足ですみません。丁寧なご指導ありがとうございます。できたところまでのコードは質問本文に追記いたしました。 1.悩んでいるとは a要素のhref属性の値と要素の間のテキストを取得するところまではできました。その後の手順として、検索対象となるlist（上記で言うとヤフー、グーグル、MSN）に入力された文字列が存在するかどうかを判定し、存在すれば、ひとまずsearchResult という変数に入れたいのですが、コードを書いてconsole.logで書き出してみても、上手く行きません（一致するのにconsole.logに出力されません）。 2.最終的に、<div id="display"></div>の間がどうなっていたら良いのか最終的にはフォームに検索したいワードを入力して検索ボタンを押すと、該当するものが、<a id="display"><a>に属性（リンク）付きで設定・表示されるようにしたいです。例えばヤフーと入力して検索すると、 <div id="display"><a href="https://www.yahoo.co.jp/">ヤフー</a></div>となるようにしたいです。また、検索ワードは部分一致でも検索できるようにしたいです。面倒くさい質問で恐縮ですが、ご教授いただければ幸いです。よろしくお願いいたします。

harashow1701

2017/05/21 10:26

for文でループさせてるところあるじゃないですか？あの中で二つの変数に値を入れてますけど、配列に値が追加されてないのは気付いてます？単体の文字列がログ出力すると出てしまいますよね？

harashow1701

2017/05/21 10:29

2の要件に関しては、a要素を生成し、生成したa要素のhrefに値を設定する方法とaタグに挟まれるテキストの設定方法を調べて下さい。次に生成と設定を終えた要素を指定のIDが割り当てられたDIVの子要素として追加する方法を調べて下さい。

harashow1701

2017/05/21 10:40

部分一致での検索は正規表現で対応して下さい。

harashow1701

2017/05/21 10:53

一致するのにconsole.logに出力されません ↑ 本当に一致していると証明出来ますか？