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

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

ただいまの
回答率

89.12%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 637

mei666

score 15

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

jQuery$(function() { 
    $('#button').on("click", function() {  
        var re = new RegExp($('#search').val());   
        $('#result tbody tr').each(function() {    
            var tr = $(this);    
            tr.hide();     
            $('td', this).each(function() {      
                var txt = $(this).html();      
                if (txt.match(re) != null) {       
                    tr.show();     
                }    
            });   
        });  
    });
    $('#button2').on("click", function() { 
        $('#result tr').show(); 
    });
});
<input type="text" id="search">
<input type="button" value="絞り込む" id="button">
<input type="button" value="すべて表示" id="button2">

<table id="result"><tbody>
<tr><td>123</td><td>abc</td></tr>
<tr><td>456</td><td>ddd</td></tr>
<tr><td>456</td><td>aaa</td></tr>
<tr><td>123</td><td>ccc</td></tr>
</tbody></table>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mei666

    2019/01/15 15:04

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

    キャンセル

  • m.ts10806

    2019/01/15 15:05

    functionが切れてるのは良くないですね。
    もし自身で難しければ下記のようなサービスを使うのも手です。
    https://tools.m-bsys.com/development_tooles/jsbeautifier.php

    キャンセル

  • mei666

    2019/01/15 15:15

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

    キャンセル

回答 3

checkベストアンサー

+2

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


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

sample

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

<script>
$(function(){
  $('#button1').on("click",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);
    });
  });
  $('#button2').on("click",function(){ 
    $('#result tbody tr').each(function(){
      var tr=$(this);
      var re=$('#search').val().trim().split(/ +/);
      var flg=re.map(function(x){
        return tr.has($('td').filter(function(){
          return $(this).text().match(new RegExp(x));
        })).get(); 
      }).filter(function(x){
        return x.length>0;
      }).length==re.length; 
      tr.toggle(flg);
    });
  });
  $('#button3').on("click",function(){ 
    $('#result tr').show(); 
  }); 
});
</script>
<input type="text" id="search" value="  a    b  ">
<input type="button" value="or検索" id="button1">
<input type="button" value="and検索" id="button2">
<input type="button" value="すべて表示" id="button3">

<table id="result">
<tbody>
<tr>
<td>1</td>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td>2</td>
<td>aaa</td>
<td>---</td>
</tr>
<tr>
<td>3</td>
<td>bbb</td>
<td>---</td>
</tr>
<tr>
<td>4</td>
<td>---</td>
<td>---</td>
</tr>
</tbody>
</table>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/15 15:23

    ありがとうございます。
    さっそく、修正してみたのですが、動かなくなってしまいました。

    対象のデータは、Tableタグ内にあり、そこから該当するデータに絞り込むという仕組みです。Tableタグ内だと難しいのでしょうか。

    キャンセル

  • 2019/01/15 16:18

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

    キャンセル

  • 2019/01/15 16:31

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

    キャンセル

+1

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

onkeydown=go"();"


onkeydown="go();"

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

複数のワードの検索

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/15 14:34

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

    キャンセル

  • 2019/01/15 15:07

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

    キャンセル

  • 2019/01/15 15:30

    すみません、初めて質問したので、文字足らずでした。

    このスペースで区切って絞り込みをする記述が私には難しくこちらに質問させていただきました。

    キャンセル

  • 2019/01/15 15:36

    まずは入力ボックス複数設置してできることを確認してください。
    あと、少し実装から遠い表現をされています。

    > このスペースで区切って絞り込みをする記述

    「入力された文字列をスペースで区切って分割し、絞込みを行う」です。
    プログラム側は何が入力されるか、どのような文字列がくるかは知りません。
    あくまで入力された情報をどのように扱うか、だけです。

    キャンセル

0

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

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

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

一案なのでご参考までに

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/15 15:29

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

    キャンセル

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

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる