検索が同じ文字列だったら再度ボタンを押しても表示はそのままにしたい

この質問の前に「JSONデータの一覧をフォームから入力した文字列で検索したい」という質問をして解決したのですが、更に検索が同じ文字列だったら再度ボタンを押しても表示はそのままにしたく、色々試行錯誤したのですが、うまくいきません。
やりたいことは、たとえば、下記の例では、ネコ4で検索した場合に
{
"name": "ネコ4",
"prefecture": "青森",
},
{
"name": "ネコ4",
"prefecture": "北海道",
},
{
"name": "ネコ4",
"prefecture": "秋田",
},
{
"name": "ネコ4",
"prefecture": "青森",
},
が表示され、再度押してしまっても、表示はそのままで、また別の文言で検索したら
表示が蓄積されずに変わるようにしたいです。
アドバイス頂けたら幸いです。

Javascript
1<!doctype html>
2<html lang="js">
3<head>
4    <meta charset="utf-8">
5    <title>CATリスト</title>
6    <!--[if lt IE 9]>
7    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
8    <![endif]-->
9    <link rel="stylesheet" href="css/form.css">
10</head>
11<body>
12    <!-- html -->
13<div class="div_cat"></div>
14
15<form name="form1" action="">
16    <input name="textBox1" type="text" value="" />
17    <input id="exec" type="button" value="Exec"/>
18</form>
19<hr />
20<div id="output"></div>
21<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
22<script>
23var count_append = 0;
24var keep_name = "test";
25
26$(function(){
27    //JSONデータ
28    var cat = {"cat_info": [
29        {
30            "name": "ネコ",
31            "prefecture": "北海道",
32        },
33        {
34            "name": "ネコ2",
35            "prefecture": "秋田",
36        },
37        {
38            "name": "ネコ3",
39            "prefecture": "青森",
40        },
41        {
42            "name": "ネコ",
43            "prefecture": "北海道",
44        },
45        {
46            "name": "ネコ2",
47            "prefecture": "秋田",
48        },
49        {
50            "name": "ネコ3",
51            "prefecture": "青森",
52        },
53        {
54            "name": "ネコ4",
55            "prefecture": "青森",
56        },
57        {
58            "name": "ネコ4",
59            "prefecture": "北海道",
60        },
61        {
62            "name": "ネコ4",
63            "prefecture": "秋田",
64        },
65        {
66            "name": "ネコ4",
67            "prefecture": "青森",
68        },
69    ]}
70
71    //HTMLを初期化
72    //$("div.div_cat").html("");
73    //HTMLを生成 一覧を表示
74    for(var index in cat.cat_info){
75      $('<p>'+
76          cat.cat_info[index].name + cat.cat_info[index].prefecture +'</p>').appendTo('.div_cat');
77    }//for文終了
78
79
80    //onButtonClick
81    $('#exec').on('click', function(){
82        var value = document.forms.form1.textBox1.value;//値が入る
83
84		if(count_append == 0){//count_appendが0だったら
85			//もし、検索窓に入力した文字列とidが一致したら、そのオブジェクトを（特定して）取り出したい、また同じ文字列だったら再度ボタンを押しても表示はそのままにしたい
86			
87			if(cat.cat_info[index].name == value) {//名前が一致していて且つ1回だけ（count_appendが0だったら）
88				for(var index in cat.cat_info) {//cat.cat_infoを全文検索
89					$('#output').append(JSON.stringify(cat.cat_info[index]));
90				}
91				count_append = 1;
92				keep_name = cat.cat_info[index].name;
93			}
94			
95			keep_name = value;
96		}else{//count_appendが0ではなかったら 何もしない
97			console.log("count_appendは1");
98			
99			//
100			if(keep_name == value){
101			
102			}	
103		}
104    });
105});
106</script>
107</body>
108</html>
109

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

回答2件

ベストアンサー

前の検索ワードを保持しておいて、入力値と比較して同じだったらポストしなければ良いだけでは？
ボタンクリックで発動するそういった処理をするjsのファンクションを挟むのが手っ取り早いと思います。

投稿2016/10/10 16:11

編集2016/10/10 16:21

fromageblanc

総合スコア2724

oyatsu8

2016/10/10 16:54

ありがとうございます、思ったような動きになりました！（が多分だめなコードだと思うので、アドバイス頂けたら助かります！）

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

このようにした所、何とか自分の思った動きになりました。
しかしちょっと無理矢理すぎる気もするので、もし、もっとよい方法があれば
アドバイス頂けたら助かります。

jacascript
1<!doctype html>
2<html lang="js">
3<head>
4    <meta charset="utf-8">
5    <title>CATリスト</title>
6    <!--[if lt IE 9]>
7    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
8    <![endif]-->
9    <link rel="stylesheet" href="css/form.css">
10</head>
11<body>
12    <!-- html -->
13<div class="div_cat"></div>
14
15<form name="form1" action="">
16    <input name="textBox1" type="text" value="" />
17    <input id="exec" type="button" value="Exec"/>
18</form>
19<hr />
20<div id="output"></div>
21<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
22<script>
23
24var keep_value = "first_value";
25
26$(function(){
27    //JSONデータ
28    var cat = {"cat_info": [
29        {
30            "name": "ネコ",
31            "prefecture": "北海道",
32        },
33        {
34            "name": "ネコ2",
35            "prefecture": "秋田",
36        },
37        {
38            "name": "ネコ3",
39            "prefecture": "青森",
40        },
41        {
42            "name": "ネコ",
43            "prefecture": "北海道",
44        },
45        {
46            "name": "ネコ2",
47            "prefecture": "秋田",
48        },
49        {
50            "name": "ネコ3",
51            "prefecture": "青森",
52        },
53        {
54            "name": "ネコ4",
55            "prefecture": "青森",
56        },
57        {
58            "name": "ネコ4",
59            "prefecture": "北海道",
60        },
61        {
62            "name": "ネコ4",
63            "prefecture": "秋田",
64        },
65        {
66            "name": "ネコ4",
67            "prefecture": "青森",
68        },
69    ]}
70
71    //HTMLを初期化
72    //$("div.div_cat").html("");
73    //HTMLを生成
74    for(var index in cat.cat_info){
75      $('<p>'+
76          cat.cat_info[index].name + cat.cat_info[index].prefecture +'</p>').appendTo('.div_cat');
77    }//for文終了
78
79
80    //onButtonClick
81    $('#exec').on('click', function(){
82		
83		
84        var value = document.forms.form1.textBox1.value;//値が入る	
85		
86		if(keep_value  == value){//前と同じなら何もしない
87			
88		}else{
89			//一度クリーン
90			$('#output').html('');
91			//もし、検索窓に入力した文字列とidが一致したら、そのオブジェクトを（特定して）取り出したい
92			for(var index in cat.cat_info) {//cat.cat_infoを全文検索
93				if(cat.cat_info[index].name == value) {//名前が一致していて且つ1回だけ（count_appendが0だったら）
94					
95					$('#output').append(JSON.stringify(cat.cat_info[index]));
96				}
97			}//ここまで取り出したい
98			
99		}
100			keep_value = value;
101			console.log(keep_value);
102    });
103});
104</script>
105</body>
106</html>
107