jQueryの絞り込み検索機能について

php
1コード
2<!DOCTYPE html>
3<html lang="ja" dir="ltr">
4  <head>
5    <meta charset="utf-8">
6    <title>TEST</title>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
8  </head>
9  <body>
10
11    <p id="test">jQuery練習</p>
12    <ul id="target">
13      <li>リンゴ100</li>
14      <li>みかん200</li>
15      <li>ブドウ150</li>
16      <li>バナナ250</li>
17    </ul>
18    <input type="text" id="name" value="">
19    <input type="button" id="test" value="ボタン">
20
21
22    <p id="result"></p>
23
24    <script type="text/javascript">
25      $(function(){
26
27        $("#name").keyup(function(){
28          var serch = $("#name").val();
29          $("#target li").each(function(){
30            var val = $(this).text();
31            if(val.match(serch)){
32              $(this).show();
33            }else {
34              $(this).hide();
35            }
36          });
37        });
38      });
39
40    </script>
41
42  </body>
43</html>

このコードの時、通常通りリアルタイムで絞り込みが行われるのですが、初めのページにulの要素が表示されてしまいます。
初期ページにulを表示せずに絞り込み機能を利用する方法を教えてください

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

回答1件

ベストアンサー

最初は表示させないということであれば要素を隠し、あとはmatchした数をカウントしてそれによって動作を振り分ければいいと思います。

jQuery
1$(function(){
2 	var target = $('#target');
3 	target.hide();
4 	$("#name").keyup(function(){
5		var serch = $("#name").val();
6		var n = 0;	// 追加
7		$("#target li").each(function(){
8			var val = $(this).text();
9			if(val.match(serch)){
10				$(this).show();
11				n ++;	// 追加
12			}else {
13				$(this).hide();
14			}
15		});
16
17		// 以下追加
18		if (n) {
19			target.show();
20		} else {
21			target.hide();
22		}
23	});
24});