Q&A
細かいですが tabele → table です。
前提・実現したいこと
チェックボックスと入力を使っての検索でシステムを作っているのですが
競合が発生してしまい困っています。
発生している問題・エラーメッセージ
入力検索をした後チェックボックスで検索を行うと入力検索の値が引き継がれません。
逆もまた然りです。
###ソースコード
<div class="search-box"> <span class="search-box_label">性別:</span> <label> <input type="checkbox" name="search_gender" value="男性">男性 </label> <label> <input type="checkbox" name="search_gender" value="女性">女性 </label> </div> <div class="search-box"> <span class="search-box_label">部署:</span> <label> <input type="checkbox" name="search_dept" value="1部">1部 </label> <label> <input type="checkbox" name="search_dept" value="2部">2部 </label> <label> <input type="checkbox" name="search_dept" value="3部">3部 </label> </div> <input type="text" class="tac inCenter" id="search-text" placeholder="文字を入力"> <table id="abcd" class="target-area sort" border> <thead> <tr class="emp_index"> <th class="sort" data-sort="All_emp_name">社員名</th> <th class="sort" data-sort="All_emp_gender">性別</th> <th class="sort" data-sort="All_dept_name">部署</th> </tr> </thead> <tbody class="list"> <tr class=""> <td class="All_emp_name">小次郎</td> <td class="All_emp_gender">男性</td> <td class="All_dept_name">1部</td> </tr> <tr class=""> <td class="All_emp_name">太郎</td> <td class="All_emp_gender">男性</td> <td class="All_dept_name">3部</td> </tr> <tr class=""> <td class="All_emp_name">花子</td> <td class="All_emp_gender">女性</td> <td class="All_dept_name">3部</td> </tr> <tr class=""> <td class="All_emp_name">涼子</td> <td class="All_emp_gender">女性</td> <td class="All_dept_name">1部</td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(":checkbox") .prop("checked", true) .on("change", function() { var gender = $("[name=search_gender]:checked") .map(function() { return $(this).val(); }) .get(); var dept = $("[name=search_dept]:checked") .map(function() { return $(this).val(); }) .get(); $("#abcd tbody tr").each(function() { //$(this).toggle( if ($.inArray($(this).find("td.All_emp_gender").text(), gender) >= 0 && $.inArray( $(this).find("td.All_dept_name").text(), dept) >= 0) { $(this).show(); } else { $(this).hide(); } }); }); }) .eq(0) .trigger("change"); $(function() { searchWord = function() { var searchText = $(this).val(), // 検索ボックスに入力された値 targetText; $("tbody tr").each(function() { targetText = $(this).text(); // 検索対象となるリストに入力された文字列が存在するかどうかを判断 if (targetText.indexOf(searchText) != -1) { $(this).show(); } else { $(this).hide(); } }); }; // searchWordの実行 $("#search-text").on("input", searchWord); }); </script>
試したこと
片方をcssのaddclassでnoneを追加するなど優先度を下げてみましたが駄目でした。
補足情報（FW/ツールのバージョンなど）
左右がOR検索・上下がAND検索です
実行画面
あとタイトルはもう少し質問内容に寄せたほうがいいかもしれません。
既に絞り込むのはできているわけですから
入力されたものは何と完全一致させたいのですか？
（もしくは部分一致？）
tdの全ての要素から部分一致させたいです
「性」や「部」を入れたら全部表示させていいのですね？
はい大丈夫です
>左右がOR検索・上下がAND検索で
実際にコードを動かしたわけではないですが、CSSも提示されないとこの表現では何のことかわからないのではないでしょうか。CSSも提示したうえで具体的な項目名をもって説明すべきかなと。
回答しておきました
普通はnameの一部何でしょうけどね・・・
なぜテーブルの全部の値を調べたいのかはちょっと不明
回答1件
0
ベストアンサー
javascript
1<script type="text/javascript"> 2$(function() { 3 $(":checkbox").prop("checked", true); 4 $("input").on("input", function() { 5 var gender = $("[name=search_gender]:checked").map(function() { 6 return $(this).val(); 7 }).get(); 8 var dept = $("[name=search_dept]:checked").map(function() { 9 return $(this).val(); 10 }).get(); 11 var name = $("#search-text").val(); 12 $("#abcd tbody tr").each(function() { 13 var reg=new RegExp(name); 14 if ($.inArray($(this).find("td.All_emp_gender").text(),gender) >= 0 && 15 $.inArray( $(this).find("td.All_dept_name").text(),dept) >= 0 && 16 (name=="" || 17 reg.test($(this).find("td.All_emp_name").text()) || 18 reg.test($(this).find("td.All_emp_gender").text()) || 19 reg.test($(this).find("td.All_dept_name").text()) ) 20 ){ 21 $(this).show(); 22 } else { 23 $(this).hide(); 24 } 25 }); 26 }).eq(0).trigger("input"); 27}); 28</script> 29 30<div class="search-box"> 31 <span class="search-box_label">性別:</span> 32 <label> 33 <input type="checkbox" name="search_gender" value="男性">男性 34 </label> 35 <label> 36 <input type="checkbox" name="search_gender" value="女性">女性 37 </label> 38</div> 39<div class="search-box"> 40 <span class="search-box_label">部署:</span> 41 <label> 42 <input type="checkbox" name="search_dept" value="1部">1部 43 </label> 44 <label> 45 <input type="checkbox" name="search_dept" value="2部">2部 46 </label> 47 <label> 48 <input type="checkbox" name="search_dept" value="3部">3部 49 </label> 50</div> 51<input type="text" class="tac inCenter" id="search-text" placeholder="文字を入力"> 52<table id="abcd" class="target-area sort" border> 53 <thead> 54 <tr class="emp_index"> 55 <th class="sort" data-sort="All_emp_name">社員名</th> 56 <th class="sort" data-sort="All_emp_gender">性別</th> 57 <th class="sort" data-sort="All_dept_name">部署</th> 58 </tr> 59 </thead> 60 <tbody class="list"> 61 <tr class=""> 62 <td class="All_emp_name">小次郎</td> 63 <td class="All_emp_gender">男性</td> 64 <td class="All_dept_name">1部</td> 65 </tr> 66 <tr class=""> 67 <td class="All_emp_name">太郎</td> 68 <td class="All_emp_gender">男性</td> 69 <td class="All_dept_name">3部</td> 70 </tr> 71 <tr class=""> 72 <td class="All_emp_name">花子</td> 73 <td class="All_emp_gender">女性</td> 74 <td class="All_dept_name">3部</td> 75 </tr> 76 <tr class=""> 77 <td class="All_emp_name">涼子</td> 78 <td class="All_emp_gender">女性</td> 79 <td class="All_dept_name">1部</td> 80 </tr> 81 </tbody> 82</table>
調整版
javascript
1$(function() { 2 $("input").on("input change", function() { 3 var gender = $("[name=search_gender]:checked").map(function() { 4 return $(this).val(); 5 }).get(); 6 var dept = $("[name=search_dept]:checked").map(function() { 7 return $(this).val(); 8 }).get(); 9 var name = $("#search-text").val(); 10 $("#abcd tbody tr").each(function() { 11 var reg=new RegExp(name); 12 if ($.inArray($(this).find("td.All_emp_gender").text(),gender) >= 0 && 13 $.inArray( $(this).find("td.All_dept_name").text(),dept) >= 0 && 14 (name=="" || 15 reg.test($(this).find("td.All_emp_name").text()) || 16 reg.test($(this).find("td.All_emp_gender").text()) || 17 reg.test($(this).find("td.All_dept_name").text()) ) 18 ){ 19 $(this).show(); 20 } else { 21 $(this).hide(); 22 } 23 }); 24 }); 25 $(":checkbox").prop("checked", true).eq(0).trigger('change'); 26}); 27
codepen
投稿2019/07/18 03:37
編集2019/07/18 05:08総合スコア114771
すいません
ここまでは出来ているのですが入力検索も含めてのAND検索ができず困っております。
入力検索に値が入っている間は付与したスタイルを保持するような処理をしたいです。
> ここまでは出来ているのですが
命題を見る限りできているとは言い難いです
＞ 入力検索も含めてのAND検索ができず困っております。
それが今回の回答ですが、コピペで試してみました？
> それが今回の回答ですが、コピペで試してみました？
コピペで試してみたところ検索ボックスに太郎と入れた場合、太郎さんが検索されますが、検索ボックス内に太郎と入れたまま適当なチェックボックスをクリックするとチェックボックスでの検索が優先されてしまいます。
再現はこちらで行いました
https://codepen.io/anon/pen/qeBOOj?editors=1000
> 私の環境がおかしいのでしょうか？
いえ、多分あっていると思います。
命題の仕様がおかしいのです。
全部チェック＋太郎→太郎の行が表示
その上で、男性を外したり、３部を外したりすると消える
「AND」検索なのだからあってますよね？
>全部チェック＋太郎→太郎の行が表示
>その上で、男性を外したり、３部を外したりすると消える
>「AND」検索なのだからあってますよね？
「AND」検索を間違って覚えていたらすいません
・全部チェック+太郎 は 全性別かつ全部署かつ太郎
・男性を外す＋全部署＋太郎 は 女性（男性じゃない）かつ全部署かつ太郎
→何も表示されないが正常動作ですよね？
何度も試してみましたが全部署＋太郎から男性のチェックを外すとすべての女性（花子と涼子）のみが出力されます。
＞ すべての女性（花子と涼子）のみが出力
それはおかしいです。ちょっと調べてみます
一応画像を追記しました。
調整版あげました
checkboxのinputイベントはブラウザによって反応が違うようなので
inputタグのinputとchange両方拾ってみました
動作環境提示してください
codepenのリンクはってあります
確認してみてください
GoogleChromeで実行してみたところ無事動作しました。
お時間を取らせてしまい申し訳ございませんでした。
次回からは動作環境もしっかり提示いたします。
ありがとうございました。
あなたの回答
tips
プレビュー
