キーワード検索したい

前回に引き続き、キーワード検索について修正しています。
Tableタグ内でキーワード検索はできたのですが、HTMLのレイアウトを変更して、掲載したhtmlの中でキーワード検索が可能かどうか教えていただけますでしょうか。

jQueryは、htmlをTableで作成した時のものとなります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4		<title>Q and A</title>
5		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7		<meta http-equiv="Content-Style-Type" content="text/css">
8		<link rel="stylesheet" type="text/css" href="style.css">
9		<link rel="stylesheet" type="text/css" href="css/css_qa.css">
10		<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
11		<script src="js/jjquery.quicksearch1.js" type="text/javascript">
12				</script>
13				
14				</head>
15				<body>
16				<div id="contents">
17								<div id="main">
18										
19										<p> <input type="text" id="search" value=" "> <input type="button" value="and検索" id="button2" id="btn-onoff"> <input type="button" value="すべて表示" id="button3"> 
20											<label><input type="checkbox" id="check1">ハイライト</label>
21				
22
23<div class="cp_qa">
24<div class="cp_actab">
25
26<input id="cp_tabfour011" type="checkbox" name="tabs">
27<label for="cp_tabfour011">Ｑ：ああああaa</label>
28	<div class="cp_actab-content">
29	<p>Ａ：いいいいいい</p>
30	</div>
31</div>
32<div class="cp_actab">
33<input id="cp_tabfour012" type="checkbox" name="tabs">
34<label for="cp_tabfour012">Ｑ：ああbb</label>
35	<div class="cp_actab-content">
36	<p>Ａ：ううううう</p>
37	</div>
38</div>
39<div class="cp_actab">
40<input id="cp_tabfour013" type="checkbox" name="tabs">
41<label for="cp_tabfour013">Ｑ：いいいいcc</label>
42	<div class="cp_actab-content">
43	<p>Ａ：ええええええ</p>
44	</div>
45
46</div>
47</div>
48</body>

jQuery
1$(function() {
2	$('#button1').on("click", function() {
3		var re = new RegExp($('#search').val().trim().replace(/ +/, "|"));
4		$('div.cp_actab').each(function() {
5			$(this).toggle($(this).find('p,label').filter(function() {
6				return $(this).text().match(re) ? true : false;
7			}).length > 0);
8		});
9	});
10	$('#button2').on("click", function() {
11		$('div.cp_actab').each(function() {
12			var tr = $(this);
13			var re = $('#search').val().trim().split(/ +/);
14			var flg = re.map(function(x) {
15				return div.has($('div').filter(function() {
16					return $(this).text().match(new RegExp(x));
17				})).get();
18			}).filter(function(x) {
19				return x.length > 0;
20			}).length == re.length;
21			div.toggle(flg);
22		});
23	});
24	$('#button3').on("click", function() {
25		$('$('div.cp_actab').show();
26	});
27});

yambejp

2019/01/23 01:08

検索対象のQかAのどちらかにキーワードがあればその組み合わせで表示・非表示を切り替えるのでしょうか？ボタンや#searchのhtml表記も省略しているしあまり雑に質問されると質問の意図がつたわってきません。最低でも続きなら続きで前回の質問のリンクを貼ってください

mei666

2019/01/23 01:57

申し訳ありません。前回のものにリンク貼るというのも気が付きませんでした。 htmlの方は追記で載せました。すみません、こういうサイトの利用も、jqueryも初心者のためルールがわかっていませんでした。気を付けます。

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

回答2件

ベストアンサー

前とちょっとロジックがかわったかもしれませんがこう

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function() {
4  $('#button1').on("click", function() {
5    var re = new RegExp($('#search').val().trim().replace(/ +/g, "|"));
6    $('div.cp_actab').each(function() {
7      $(this).toggle($(this).find('p,label').filter(function() {
8        return $(this).text().match(re) ? true : false;
9      }).length > 0);
10    });
11  });
12  $('#button2').on("click", function() {
13    $('div.cp_actab').each(function() {
14      var div = $(this);
15      var re = $('#search').val().trim().split(/ +/);
16      var flg=re.filter(function(x){
17        return div.text().match(new RegExp(x))?true:false;
18      }).length==re.length;
19      div.toggle(flg);
20    });
21  });
22  $('#button3').on("click", function() {
23    $('div.cp_actab').show();
24  });
25  $('#check1').on("change", function() {
26    var re = new RegExp("("+$('#search').val().trim().replace(/ +/g, "|")+")+","g");
27    var ch=$(this);
28    $('.cp_actab label,.cp_actab-content p').each(function(){
29      var txt=$(this).text();
30      if(ch.prop('checked')){
31        txt=txt.replace(re,'<span style="display:inline-block;background-Color:yellow">$&</span>')
32      }
33      $(this).html(txt);
34    });
35  }).trigger('change');
36  $('#search').on('change',function(){
37    $('#check1').trigger('change');
38  });
39});
40</script>
41
42<div id="contents">
43<div id="main">
44<p>
45<input type="text" id="search" value="あ う">
46<input type="button" value="or検索" id="button1">
47<input type="button" value="and検索" id="button2">
48<input type="button" value="すべて表示" id="button3"> 
49<label><input type="checkbox" id="check1">ハイライト</label>
50<div class="cp_qa">
51<div class="cp_actab">
52<input id="cp_tabfour011" type="checkbox" name="tabs">
53<label for="cp_tabfour011">Ｑ：ああああaa</label>
54<div class="cp_actab-content">
55<p>Ａ：いいいいいい</p>
56</div>
57</div>
58<div class="cp_actab">
59<input id="cp_tabfour012" type="checkbox" name="tabs">
60<label for="cp_tabfour012">Ｑ：ああbb</label>
61<div class="cp_actab-content">
62<p>Ａ：ううううう</p>
63</div>
64</div>
65<div class="cp_actab">
66<input id="cp_tabfour013" type="checkbox" name="tabs">
67<label for="cp_tabfour013">Ｑ：いいいいcc</label>
68<div class="cp_actab-content">
69<p>Ａ：ええええええ</p>
70</div>
71</div>
72</div>
73