この質問の前に「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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/10 16:54