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

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

新規登録して質問してみよう
ただいま回答率
85.46%
プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

2411閲覧

複数ワードで検索を行いたい(AND検索)

ken_takenaka

総合スコア1

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2021/02/08 01:05

前提・実現したいこと

初めて質問させていただきます。
プログラミングは"ど"が付くほどの素人です。

ホームページ内の商品一覧をテキストで絞り込みを行いたいと思っております。
※AND検索

こちらのページで以下のコードを発見し、自分なりに変更させていただき、入力を起点にリアルタイムで検索されるtableは作成できましたが、どうしてもOR検索になります。

こちらをAND検索したいと思っております。

該当のソースコード

jQuery(function($) { 

$('#search').on('input',function() {  var re = new RegExp($('#search').val().trim().replace(/ +/,"|")); $('#result tbody tr').each(function(){ $(this).toggle($(this).find('td').filter(function(){ return $(this).text().match(re)?true:false; }).length>0); });

});

});

試したこと

OR検索をAND検索にしたい。

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

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

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

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

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

guest

回答1

0

ベストアンサー

両方含む正規表現は「^(?=.*aaa)(?=.*bbb)」なので

javascript

1var re = new RegExp("^"+$('#search').val().trim().split(/ +/).map(x=>`(?=.*${x})`).join(""));

みたいな感じになります

投稿2021/02/08 01:47

yambejp

総合スコア115010

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

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

ken_takenaka

2021/02/08 02:37

回答ありがとうございます。 質問内容が稚拙で大変申し訳ございません。 今回頂い内容でAND検索は実現できましたが、異なる問題が発生してしまいました。 以下の様なtableがあった場合 <input type="text" id="search"> <table id="result"><tbody> <tr><td>東京都・港区</td><td>太郎さん</td></tr> <tr><td>北海道札幌市</td><td>花子さん</td></tr> <tr><td>大阪府 堺市</td><td>田中</td></tr> <tr><td>東京都 港区</td><td>原田さん</td></tr> </tbody></table> 今回頂戴したコードを入れた場合、入力フォームに「東京都 港区」と入力された場合は、1段目と4段目が表示されます。しかし、入力フォームに「東京都 太郎」と入力された場合は、検索がヒットしません。 仕組みとしては、<td>で囲っている部分の中でAND検索している為だとは思ったのですが、<tr>で囲っている部分でヒットできる様にすることは可能なのでしょうか? $(this).toggle($(this).find('td').filter(function(){ find('td')をtrに変えたらできるのかな?と思い変えてみてもうまい事いきません。 申し訳ございません。よろしくお願いします。
yambejp

2021/02/08 03:02 編集

こんな感じ <script> $(function(){ $('#btn').on('click',function(){ var re = new RegExp("^"+$('#search').val().trim().split(/ +/).map(x=>`(?=.*${x})`).join("")); console.log(re); $('#result tr').hide().filter(function(){ return $('td',this).map(function(){ return $(this).text(); }).get().join(" ").match(re); }).show(); }); }); </script> <input type="text" id="search" value="東京都 太郎"> <input type="button" value="search" id="btn"> <table id="result"> <tbody> <tr><td>東京都・港区</td><td>太郎さん</td></tr> <tr><td>北海道札幌市</td><td>花子さん</td></tr> <tr><td>大阪府 堺市</td><td>田中</td></tr> <tr><td>東京都 港区</td><td>原田さん</td></tr> </tbody></table>
ken_takenaka

2021/02/08 03:07

早急なご回答ありがとうございます。 シンプルにすごすぎます。 思っていたものができました。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問