teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JQueryで検索システムを作りたい

編集履歴

質問編集履歴

2

ソースコードを修正しました。

2017/05/29 10:15

投稿

kozy
kozy

スコア20

title CHANGED
File without changes
body CHANGED
@@ -18,55 +18,86 @@
18
18
  <script src="https://code.jquery.com/jquery-2.2.4.js"
19
19
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
20
20
  crossorigin="anonymous"></script>
21
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
21
22
  <style>
22
- #list {
23
+ .target-area {
23
24
  display: none;
24
25
  }
25
26
  </style>
26
27
  </head>
27
28
  <body>
29
+ <body>
30
+ <div class="wrapper">
31
+ <div class="search-area">
28
- <form>
32
+ <form>
29
- <input type="text" id="search_text">
33
+ <input type="text" id="search-text" placeholder="検索ワードを入力">
30
- <button id="btn">クリック</button>
31
- <div id="display"></div>
32
- <ul id="list">
33
- <li class="address"><a href="https://www.yahoo.co.jp/">ヤフー</a><li>
34
- <li class="address"><a href="https://www.google.co.jp/">グーグル</a><li>
35
- <li class="address"><a href="http://www.msn.com/">MSN</a><li>
36
- </ul>
37
- </form>
34
+ </form>
35
+ <div class="search-result">
36
+ <div class="search-result__hit-num"></div>
37
+ <div id="search-result__list"></div>
38
- <script>
38
+ </div>
39
- window.onload = function(){
40
- var btn = document.getElementById('btn');
41
- btn.addEventListener('click', function(){
42
- var searchResult = [];
43
- var searchText = document.getElementById('search_text').value;
44
- //console.log(searchText);
39
+ </div>
45
- var address = document.getElementsByClassName('address');
46
40
 
47
- //a要素のhref属性の値と要素の間のテキストをそれぞれ取得
48
- for(i = 0; i < address.length; i++){
41
+ <ul class="target-area">
42
+ <li class="address"><a href="https://www.yahoo.co.jp/">ヤフー</a><li>
43
+ <li class="address"><a href="https://www.google.co.jp/">グーグル</a><li>
49
- var address_array = address[i].firstChild.getAttribute('href');
44
+ <li class="address"><a href="http://www.msn.com/">MSN</a><li>
50
- var potalSite = address[i].firstChild.textContent;
45
+ <li class="address"><a href="https://www.infoseek.co.jp/">インフォシーク</a><li>
51
- console.log(potalSite);
46
+ </ul>
52
- }
47
+ </div><!-- /.wrapper -->
53
48
 
54
- // 検索対象となるリストに入力された文字列が存在するかどうかを判定
49
+ </body>
50
+ <script>
55
- if(potalSite.indexOf(searchText) != -1){
51
+ $(function () {
56
- searchResult.push(searchText);
52
+ searchWord = function(){
57
- }
58
- console.log(searchResult);
53
+ var searchResult,
54
+ searchText = $(this).val(), // 検索ボックスに入力された値
55
+ targetText,
56
+ targetTextArray = [],
57
+ targetHref,
58
+ targetHrefArray = [],
59
+ hitNum;
59
60
 
61
+ // 検索結果を格納するための配列を用意
62
+ searchResult = [];
63
+ // 検索結果エリアの表示を空にする
64
+ $('#search-result__list').empty();
65
+ $('.search-result__hit-num').empty();
60
66
 
67
+ // 検索ボックスに値が入ってる場合
68
+ if (searchText != '') {
69
+ $('.target-area li a').each(function() {
70
+ targetText = $(this).text();
71
+ targetTextArray.push(targetText);
72
+ targetHref = $(this).attr('href');
73
+ targetHrefArray.push(targetHref);
74
+ // 検索対象となるリストに入力された文字列が存在するかどうかを判断
75
+ if (targetText.indexOf(searchText) != -1) {
76
+ // 存在する場合はそのリストのテキストを用意した配列に格納
77
+ searchResult.push(targetText);
78
+ }
61
- });
79
+ });
80
+
62
-
81
+ // 検索結果をページに出力
82
+ for (var i = 0; i < searchResult.length; i++) {
83
+ var univHref = targetHrefArray[targetTextArray.indexOf(searchResult[i])];
84
+ $('<a>').text(searchResult[i]).appendTo('#search-result__list').attr('href', univHref);
85
+ }
86
+ // ヒットの件数をページに出力
87
+ hitNum = searchResult.length + '件のポータルサイトが見つかりました。';
88
+ $('.search-result__hit-num').append(hitNum);
89
+ }
63
90
  };
91
+ // searchWordの実行
92
+ $('#search-text').on('input', searchWord);
93
+ });
64
94
  </script>
65
95
  </body>
66
96
  </html>
67
97
 
68
98
 
69
99
 
100
+
70
101
  ```
71
102
 
72
103
  ###試したこと

1

出来たところまでのコードを追記しました。

2017/05/29 10:15

投稿

kozy
kozy

スコア20

title CHANGED
File without changes
body CHANGED
@@ -18,27 +18,55 @@
18
18
  <script src="https://code.jquery.com/jquery-2.2.4.js"
19
19
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
20
20
  crossorigin="anonymous"></script>
21
+ <style>
22
+ #list {
23
+ display: none;
24
+ }
25
+ </style>
21
26
  </head>
22
27
  <body>
23
28
  <form>
24
29
  <input type="text" id="search_text">
25
30
  <button id="btn">クリック</button>
26
- <a id="display"><a>
31
+ <div id="display"></div>
27
32
  <ul id="list">
28
- <li><a href="https://www.yahoo.co.jp/">ヤフー</a><li>
33
+ <li class="address"><a href="https://www.yahoo.co.jp/">ヤフー</a><li>
29
- <li><a href="https://www.google.co.jp/">グーグル</a><li>
34
+ <li class="address"><a href="https://www.google.co.jp/">グーグル</a><li>
30
- <li><a href="http://www.msn.com/">MSN</a><li>
35
+ <li class="address"><a href="http://www.msn.com/">MSN</a><li>
31
36
  </ul>
32
37
  </form>
33
38
  <script>
34
- $(function(){
39
+ window.onload = function(){
40
+ var btn = document.getElementById('btn');
35
- $('#list').hide();
41
+ btn.addEventListener('click', function(){
42
+ var searchResult = [];
43
+ var searchText = document.getElementById('search_text').value;
44
+ //console.log(searchText);
45
+ var address = document.getElementsByClassName('address');
46
+
47
+ //a要素のhref属性の値と要素の間のテキストをそれぞれ取得
48
+ for(i = 0; i < address.length; i++){
49
+ var address_array = address[i].firstChild.getAttribute('href');
50
+ var potalSite = address[i].firstChild.textContent;
51
+ console.log(potalSite);
52
+ }
53
+
54
+ // 検索対象となるリストに入力された文字列が存在するかどうかを判定
55
+ if(potalSite.indexOf(searchText) != -1){
56
+ searchResult.push(searchText);
57
+ }
58
+ console.log(searchResult);
59
+
60
+
36
- });
61
+ });
62
+
63
+ };
37
64
  </script>
38
65
  </body>
39
66
  </html>
40
67
 
41
68
 
69
+
42
70
  ```
43
71
 
44
72
  ###試したこと