質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1604閲覧

複数のワードの検索の仕組みを作りたい

mei666

総合スコア15

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2019/01/15 05:18

編集2019/01/15 06:40

社内サーバー(Webサーバーではない)にHTMLを作成しています。
ページ内の一覧から、キーワード検索できるようにInputboxを設置しております。
現在は、1つのキーワードで検索できます↓が、複数のキーワードで検索できるようにしたいのですが、どうなおしたらいいのか、わかりません。
jQueryは素人です。
例ですが、inputboxに「1 a」で検索をかけると1行目のみ表示したいのです。
今の記述だと1つのワードしか検索かけられません。
アドバイスいただけると助かります!

jQuery

1jQuery$(function() {  2 $('#button').on("click", function() {   3 var re = new RegExp($('#search').val());    4 $('#result tbody tr').each(function() {     5 var tr = $(this);     6 tr.hide();      7 $('td', this).each(function() {       8 var txt = $(this).html();       9 if (txt.match(re) != null) {        10 tr.show();      11 }     12 });    13 });   14 }); 15 $('#button2').on("click", function() {  16 $('#result tr').show();  17 }); 18}); 19

html

1<input type="text" id="search"> 2<input type="button" value="絞り込む" id="button"> 3<input type="button" value="すべて表示" id="button2"> 4 5<table id="result"><tbody> 6<tr><td>123</td><td>abc</td></tr> 7<tr><td>456</td><td>ddd</td></tr> 8<tr><td>456</td><td>aaa</td></tr> 9<tr><td>123</td><td>ccc</td></tr> 10</tbody></table>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/15 05:19

インデントはきちんとつけてください。 カッコの開始と終了が分かりにくいコードはそれだけで不具合の要因となりえます。
azuapricot

2019/01/15 05:27

インデントがごちゃごちゃで見る気が失せるのでインデントはしっかりしてください。 プログラムの基本です
mei666

2019/01/15 06:04

すみません。修正してみましたが、 素人なのでちょっとみづらいかもしれません。。
mei666

2019/01/15 06:15

ありがとうございます! 早速試して修正しました。これから徐々に勉強していきます。
guest

回答3

0

ベストアンサー

javascript

1 var re = new RegExp($('#search').val().trim().replace(/ +/,"|"));

とすればスペース区切りで書かれたものはor検索できます。
(ただし「|」という文字はそのままでは検索できない)

sample

とりあえず冗長に書いてみました。

javascript

1<script> 2$(function(){ 3 $('#button1').on("click",function(){ 4 var re = new RegExp($('#search').val().trim().replace(/ +/,"|")); 5 $('#result tbody tr').each(function(){ 6 $(this).toggle($(this).find('td').filter(function(){ 7 return $(this).text().match(re)?true:false; 8 }).length>0); 9 }); 10 }); 11 $('#button2').on("click",function(){ 12 $('#result tbody tr').each(function(){ 13 var tr=$(this); 14 var re=$('#search').val().trim().split(/ +/); 15 var flg=re.map(function(x){ 16 return tr.has($('td').filter(function(){ 17 return $(this).text().match(new RegExp(x)); 18 })).get(); 19 }).filter(function(x){ 20 return x.length>0; 21 }).length==re.length; 22 tr.toggle(flg); 23 }); 24 }); 25 $('#button3').on("click",function(){ 26 $('#result tr').show(); 27 }); 28}); 29</script> 30<input type="text" id="search" value=" a b "> 31<input type="button" value="or検索" id="button1"> 32<input type="button" value="and検索" id="button2"> 33<input type="button" value="すべて表示" id="button3"> 34 35<table id="result"> 36<tbody> 37<tr> 38<td>1</td> 39<td>aaa</td> 40<td>bbb</td> 41</tr> 42<tr> 43<td>2</td> 44<td>aaa</td> 45<td>---</td> 46</tr> 47<tr> 48<td>3</td> 49<td>bbb</td> 50<td>---</td> 51</tr> 52<tr> 53<td>4</td> 54<td>---</td> 55<td>---</td> 56</tr> 57</tbody> 58</table>

投稿2019/01/15 05:39

編集2019/01/15 07:17
yambejp

総合スコア114680

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mei666

2019/01/15 06:23

ありがとうございます。 さっそく、修正してみたのですが、動かなくなってしまいました。 対象のデータは、Tableタグ内にあり、そこから該当するデータに絞り込むという仕組みです。Tableタグ内だと難しいのでしょうか。
yambejp

2019/01/15 07:18

or検索とand検索、両方のせときました
mei666

2019/01/15 07:31

すごいです!! ありがとうございます!助かりました。
guest

0

コード全部読んだわけじゃないですけど、下記はおかしいですね。

html

1onkeydown=go"();"

html

1onkeydown="go();"

とはいってもgo()という関数はどこにも定義されていないようですが・・。

複数のワードの検索

1つのtextボックスを利用する場合、「仕様」を決める必要があります。
複数と言うことは何かをセパレータに文言を複数指定するわけですよね?
Googleなどはスペースで複数指定します(teratailも)
まずはその仕様を決めてください。
またその複数のキーワードが「and」なのか「or」なのか検索の仕様を決めてください。

あとは決めたセパレータで分割したキーワードで絞り込んでいくだけです。

投稿2019/01/15 05:22

m.ts10806

総合スコア80838

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mei666

2019/01/15 05:34

回答ありがとうございます。 スペースで区切りたいと思っています。
m.ts10806

2019/01/15 06:07

ではそのように作ってください。 区切ったワードがそれぞれ取得できれば(配列であっても) 複数入力ボックスがある場合と同じです。 (つまり、複数入力ボックスがあった場合でも対応できるか?というところも焦点です)
mei666

2019/01/15 06:30

すみません、初めて質問したので、文字足らずでした。 このスペースで区切って絞り込みをする記述が私には難しくこちらに質問させていただきました。
m.ts10806

2019/01/15 06:36

まずは入力ボックス複数設置してできることを確認してください。 あと、少し実装から遠い表現をされています。 > このスペースで区切って絞り込みをする記述 「入力された文字列をスペースで区切って分割し、絞込みを行う」です。 プログラム側は何が入力されるか、どのような文字列がくるかは知りません。 あくまで入力された情報をどのように扱うか、だけです。
guest

0

以前キーワード検索案件で実際に実装したときは、
キーワードの間は 半角スペース か カンマ(,) で区切るという仕様を決めて実装しました。
もちろん使用者にもわかるように説明文をつけました。

「キーワードを複数設定する場合は半角スペースかカンマで区切ってください」
みたいな感じで。

あとは入力された文字列を受け取って、半角スペースか、カンマで分割して検索する。
それだけです。

一案なのでご参考までに

投稿2019/01/15 05:31

azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mei666

2019/01/15 06:29

回答ありがとうございます。 記入漏れですが、すみません。 1つのワードをスペースで検索する、記述が私には難しくてこちらに質問させていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問