Q&A
動かしてみた結果はおかしくないように見えました。具体的に
・どうしたとき
・期待される結果はどうで
・実際の結果はこう
を書いてください（質問を編集してください）
前提・実現したいこと
JavaScriptでチェックボックスとキーワードによる絞り込みを作っています。
and条件でチェックボックスでチェックした項目のリストを絞り込み、更に
キーワード検索欄に入力した文字列を含むリストのみを表示させるようにしたいです。
発生している問題・エラーメッセージ
■検索したとき 例えば次の手順で検索したとき チェックボックス 築年数 5年にチェック → キーワードに「東」と入力 ■期待される結果 5年の築年数で「東」を含むデータのみを表示 ■実際の結果 「東」を含むデータすべて表示される。 チェックボックス、キーワード検索はそれぞれ動くのですが and条件で絞り込みするためにコードをどう書けばよいか どうしてもわかりません。 申し訳ありませんが、JavaScript初心者です。 アドバイスをいただければ幸いです。 どうぞよろしくお願いします。。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <style> abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} [v-cloak]{display: none;} *{word-break: break-all;} table{font-size: 12px;border-top: 1px solid #ddd;border-left: 1px solid #ddd; margin-top:60px; margin-bottom: 30px;width: 100%;} table th,table td{vertical-align: top;text-align: left;border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 8px 10px;} table th{white-space: nowrap;border-bottom-width: 2px;} thead tr{background: #eee;} tbody tr:nth-child(even){background: #eee;} :not.is-hide tr:nth-child(even){background: #eee;} h1{padding-top: 20px;} .is-hide{display: none;} .search-style{margin: 26px 35px;} .search-style li{display: inline-block;padding-right:20px;} .search-style h2{width: 130px;} </style> <!--<script src="scripts/textserch.js"></script>--> <script src="js/jquery-3.6.0.min.js"></script> </head> <body> <h1 style="padding-left: 10px;">物件検索</h1> <div class="faq search-style" id="app"> <ul> <li><h2>フリーワード検索</h2></li> <!--★<li><input type="search" id="search-text" class="light-table-filter" data-table="order-table" placeholder="検索" /></li>--> <li><input type="text" id="search-text" class="light-table-filter " data-table="order-table" placeholder="検索" /></li> </ul> </div> <!--★ チェックボックス1 表示 CSS .is-hideで表示非表示を設定 --> <div class="search-box search-style" id="js-filter"> <ul class="search-box_label"> <li><h2>間取り</h2></li> <li><label><input type="checkbox" name="kubn" value="1LDK">1LDK</label></li> <li><label><input type="checkbox" name="kubn" value="2LDK">2LDK</label></li> <li><label><input type="checkbox" name="kubn" value="3LDK">3LDK</label></li> <li><label><input type="checkbox" name="kubn" value="4LDK">4LDK</label></li> <!-- /.filter-cond --></ul> </div> <!--★ チェックボックス 表示--> <!--★ チェックボックス2 表示 CSS .is-hideで表示非表示を設定 --> <div class="search-box search-style" id="js-filter"> <ul class="search-box_label"> <li><h2>築年数</h2></li> <li><label><input type="checkbox" name="level" value="3年未満">3年未満</label></li> <li><label><input type="checkbox" name="level" value="5年未満">5年未満</label></li> <li><label><input type="checkbox" name="level" value="10年未満">10年未満</label></li> <!-- /.filter-cond --></ul> </div> <!--★ チェックボックス 表示--> <!--★ CSVデータtable 表示--> <table id="output_data" class="order-table"> <thead> <tr> <td>区分</td> <td>方角</td> <td>階</td> <td>駅徒歩</td> <td>築年数</td> <td>家賃</td> <td>その他</td> </tr> </thead> <tbody> <tr class="list_item" data-kubn="1LDK" data-level="3年未満"> <td>1LDK</td> <td>南東</td> <td> 4F</td> <td>3分</td> <td>3年未満</td> <td>6万</td> <td>バストイレ別</td> </tr> <tr class="list_item" data-kubn="2LDK" data-level="5年未満"> <td>2LDK</td> <td>北東</td> <td>2F</td> <td>10分</td> <td>5年未満</td> <td>6.5万</td> <td>バルコニー</td> </tr> <tr class="list_item" data-kubn="3LDK" data-level="10年未満"> <td>3LDK</td> <td>西</td> <td>1F</td> <td>150分</td> <td>10年未満</td> <td>10 万</td> <td>システムキッチン</td> </tr> <tr class="list_item" data-kubn="4LDK" data-level="3年未満"> <td>4LDK</td> <td>東</td> <td>1F</td> <td>4分</td> <td>3年未満</td> <td>9万</td> <td>ユニットバス/システムキッチン</td> </tr> <tr class="list_item" data-kubn="1LDK" data-level="5年未満"> <td>1LDK</td> <td>北東</td> <td>3F</td> <td>15分</td> <td>5年未満</td> <td>5万</td> <td>バストイレ別</td> </tr> <tr class="list_item" data-kubn="2LDK" data-level="10年未満"> <td>2LDK</td> <td>南</td> <td>5F</td> <td>20分</td> <td>10年未満</td> <td>8万</td> <td>バルコニー/バストイレ別</td> </tr> </tbody> </table> <script> // フリーワード絞り込み $(document).ready(function(){ $('#search-text').on('input', function(){ Search($(this).val()); }); }); function Search(keyword) { var regExp = new RegExp(keyword); $('#output_data tbody').find('tr').hide().each(function(){ var tr = $(this); $(this).find('td').each(function(){ if ($(this).text().match(regExp)) { tr.show(); } }) }); } // チェックボックス絞り込み var searchBox = '.search-box'; // 絞り込む項目を選択するエリア var listItem = '.list_item'; // 絞り込み対象のアイテム var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 $(function() { // 絞り込み項目を変更した時 $(document).on('change',searchBox + ' input' , function() { search_filter(); }); }); /** * リストの絞り込みを行う */ function search_filter() { // 非表示状態を解除 $(listItem).removeClass(hideClass); for (var i = 0; i < $(searchBox).length; i++) { var name = $(searchBox).eq(i).find('input').attr('name'); // 選択されている項目を取得 var searchData = get_selected_input_items(name); console.log(name); // 選択されている項目がない、またはALLを選択している場合は飛ばす if(searchData.length === 0 || searchData[0] === '') { continue; } // リスト内の各アイテムをチェック for (var j = 0; j < $(listItem).length; j++) { // アイテムに設定している項目を取得 var itemData = $(listItem).eq(j).data(name); // 絞り込み対象かどうかを調べる if(searchData.indexOf(itemData) === -1) { $(listItem).eq(j).addClass(hideClass); } } } } /** * inputで選択されている値の一覧を取得する * @param {String} name 対象にするinputのname属性の値 * @return {Array} 選択されているinputのvalue属性の値 */ function get_selected_input_items(name) { var searchData = []; $('[name=' + name + ']:checked').each(function() { searchData.push($(this).val()); console.log($(this).val()); }); return searchData; } </script> </body> </html>
試したこと
キーワード検索の処理コードをチェックボックスの処理コードに
コードを入れてみましたが、間違っているかすべて非表示になってしまいます。
if(searchData.indexOf(itemData) === -1) { $(listItem).eq(j).addClass(hideClass);
}else{
//チェックボックスの絞り込み対象リストの<td>のテキストに
//キーワード検索の文字列を含まない場合
// $(listItem).eq(j).addClass(hideClass);する
}
イベントの記入方法についても
チェックボックスまたはキーワード検索に入力または変更が
あった場合、処理を実行するように複数条件で
書くべきかと思っていますが、動かなくなってしまいます。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
これは質問者さんが書き上げたコードなのでしょうか？
コードが以下の点でちぐはぐです。
- テキストボックスに入力されたときは
Searchが実行され、チェックボックスが変化したときはsearch_filterが実行されているが、Searchは入力されたワードだけで判定しているし、search_filterはチェックボックスの状態だけで判定しており、お互いに連携ができていない。 Searchでは要素のhide()とshow()メソッドで非表示／表示を切り替えているが、search_filterでは要素にis-hideクラスを持たせるか外すか（それによって要素のスタイルをdisplay: noneとするか否か）によって非表示／表示を切り替えており、整合性が無い。
設計段階からやり直しが必要です。
投稿2021/06/27 03:15
総合スコア8402
あなたの回答
tips
プレビュー
