前提・実現したいこと
Spring bootで、データベースのデータを表示させ、非同期で絞り込んで検索が出来るサイト製作をしております。
現状だとラジオボタン、チェックボックス、ソートボタン、選択をリセットするボタンをそれぞれ非同期で実装できたのですが、それぞれが独立しており、ラジオボタン+チェックボタンで細かい検索が出来ない状態です。
ソートボタンも同じく、ラジオボタンやチェックボックスで絞り込んだ後にソートボタンを押しても、検索結果をソートするのではなく、データベースの全てのデータをソートして表示してしまいます。
ラジオボタンとチェックボックスを組み合わせて検索したり、検索結果からソートできるようにするにはどうしたらいいでしょうか?
該当のソースコード
HTML
1<body> 2 <h1> 3 <a href="index.html">ラーメン店検索</a> 4 </h1> 5 <hr /> 6 <p class="pagetop"><a href="#wrap">トップへ戻る</a></p> 7 <div id="form"> 8 <div class="filter-taste"> 9 <label>味</label> <br /> <input type="radio" name="rd" value="醤油" 10 id="chk01" /><label for="chk01">醤油</label> <input type="radio" 11 name="rd" value="塩" id="chk02" /><label for="chk02">塩</label> <input 12 type="radio" name="rd" value="味噌" id="chk03" /><label for="chk03">味噌</label> 13 <input type="radio" name="rd" value="とんこつ" id="chk04" /><label 14 for="chk04">とんこつ</label> <input type="radio" name="rd" value="エビ" 15 id="chk05" /><label for="chk05">エビ</label> 16 </div> 17 <br /><br/> 18 <div class="filter-place"> 19 <label>場所</label> <br /> 20 <input type="checkbox" name="place" value="東京都" id="1" /><label for="1">東京都</label> 21 <input type="checkbox" name="place" value="埼玉県" id="2"/><label for="2">埼玉県</label> 22 <input type="checkbox" name="place" value="千葉県" id="3"/><label for="3">千葉県</label><br/> 23 <input type="checkbox" name="place" value="神奈川県" id="4"/><label for="4">神奈川県</label> 24 <input type="checkbox" name="place" value="栃木県" id="5"/><label for="5">栃木県</label> 25 <input type="checkbox" name="place" value="茨城県" id="6"/><label for="6">茨城県</label> 26 <input type="checkbox" name="place" value="群馬県" id="7"/><label for="7">群馬県</label> 27 </div> 28 <br/><br/> 29 <input type="button" name="priceSort" value="最低価格安順" /> 30 <input type="button" name="priceSort2" value="最低価格高順" /> 31 <br/><br/> 32 <input type="button" name="reset" value="リセット" /> 33 <form method="get" th:action="index" th:object="${searchForm}"> 34 <div class="keyword"><br/> 35 <label>キーワード</label> <input name="keyword" type="text" maxlength="32" 36 th:field="*{keyword}" /> <input class="button" type="submit" 37 value="検索" /> 38 </div> 39 </form> 40 </div> 41 <div id="recordList"> 42 <th:block th:each="record : ${recordList}" th:object="${record}"> 43 <div class="item"> 44 <div class="name"> 45 <label>店名:</label> <a th:href="*{url}" target="_blank" 46 th:text="*{name}">店名</a> 47 </div> 48 <br /> 49 <div class="taste"> 50 <label>味:</label> <span th:text="*{taste}">味</span> 51 </div> 52 <br /> 53 <div class="place"> 54 <label>場所:</label> <span th:text="*{place}">場所</span> 55 </div> 56 <br /> 57 <div class="price"> 58 <label>最低価格:</label> <span th:text="*{price}">値段</span> 59 </div> 60 <br /> 61 <div class="imgpass"> 62 <img th:src="*{imgpass}"></img> 63 </div> 64 </div> 65 </th:block> 66 </div> 67</body>
jquery
1$(function() { 2 // ラジオボタンにチェックしたら発動 3 $('input[name="rd"]').click(function() { 4 var JSONdata ={keyword:$('input[name="rd"]:checked').val()}; 5 $.ajax({ 6 headers: { 7 'Accept': 'application/json', 8 'Content-Type': 'application/json' 9 }, 10 url:'taste', 11 type:'POST', 12 dataType:'json', 13 contentType:"application/json", 14 data:JSON.stringify(JSONdata), 15 success:function(result){ 16 function viewMessages(result){ 17 $('#recordList').empty(); 18 for (var index in result){ 19 $('#recordList').append('<div class="item">'+ 20 '<div class="name">店名: <a href=' + result[index].url + ' target="_blank">'+ result[index].name + '</a></div><br/>' + 21 '<div class="taste"><span>味: ' + result[index].taste + '</span></div><br/>' + 22 '<div class="place"><span>場所: ' + result[index].place + '</span></div><br/>' + 23 '<div class="price"><span>値段: ' + result[index].price + '</span></div><br/>' + 24 '<div class="imgpass"><img src='+ result[index].imgpass + '></img></div></div><br/>'); 25 } 26 } 27 viewMessages(result); 28 } 29 }); 30 }); 31//チェックボックスを選択したら発動 32 $('input[name="place"]').click(function() { 33 var sendList = {}; 34 var sendObj = []; 35 $('input[name="place"]:checked').each(function(i){ 36 sendObj.push($(this).val()); 37 }); 38 sendList["places"] = sendObj; 39 $.ajax({ 40 headers: { 41 'Accept': 'application/json', 42 'Content-Type': 'application/json' 43 }, 44 url:'place', 45 type:'POST', 46 dataType:'json', 47 contentType:"application/json", 48 data:JSON.stringify(sendList), 49 success:function(result){ 50 function viewMessages(result){ 51 $('#recordList').empty(); 52 for (var index in result){ 53 $('#recordList').append('<div class="item">'+ 54 '<div class="name">店名: <a href=' + result[index].url + ' target="_blank">'+ result[index].name + '</a></div><br/>' + 55 '<div class="taste"><span>味: ' + result[index].taste + '</span></div><br/>' + 56 '<div class="place"><span>場所: ' + result[index].place + '</span></div><br/>' + 57 '<div class="price"><span>値段: ' + result[index].price + '</span></div><br/>' + 58 '<div class="imgpass"><img src='+ result[index].imgpass + '></img></div></div><br/>'); 59 } 60 } 61 viewMessages(result); 62 } 63 }); 64 }); 65 //ソートボタンを押したら発動 66 $('input[name="priceSort"]').click(function() { 67 $.ajax({ 68 headers: { 69 'Accept': 'application/json', 70 'Content-Type': 'application/json' 71 }, 72 url:'priceSort', 73 type:'POST', 74 dataType:'json', 75 contentType:"application/json", 76 success:function(result){ 77 function viewMessages(result){ 78 $('#recordList').empty(); 79 for (var index in result){ 80 $('#recordList').append('<div class="item">'+ 81 '<div class="name">店名: <a href=' + result[index].url + ' target="_blank">'+ result[index].name + '</a></div><br/>' + 82 '<div class="taste"><span>味: ' + result[index].taste + '</span></div><br/>' + 83 '<div class="place"><span>場所: ' + result[index].place + '</span></div><br/>' + 84 '<div class="price"><span>値段: ' + result[index].price + '</span></div><br/>' + 85 '<div class="imgpass"><img src='+ result[index].imgpass + '></img></div></div><br/>'); 86 } 87 } 88 viewMessages(result); 89 } 90 }); 91 }); 92 $('input[name="priceSort2"]').click(function() { 93 $.ajax({ 94 headers: { 95 'Accept': 'application/json', 96 'Content-Type': 'application/json' 97 }, 98 url:'priceSort2', 99 type:'POST', 100 dataType:'json', 101 contentType:"application/json", 102 success:function(result){ 103 function viewMessages(result){ 104 $('#recordList').empty(); 105 for (var index in result){ 106 $('#recordList').append('<div class="item">'+ 107 '<div class="name">店名: <a href=' + result[index].url + ' target="_blank">'+ result[index].name + '</a></div><br/>' + 108 '<div class="taste"><span>味: ' + result[index].taste + '</span></div><br/>' + 109 '<div class="place"><span>場所: ' + result[index].place + '</span></div><br/>' + 110 '<div class="price"><span>値段: ' + result[index].price + '</span></div><br/>' + 111 '<div class="imgpass"><img src='+ result[index].imgpass + '></img></div></div><br/>'); 112 } 113 } 114 viewMessages(result); 115 } 116 }); 117 });