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

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

質問する

ただいまの
回答率

88.13%

検索結果の該当件数をリアルタイムに表示させたい

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 1
  • VIEW 4,486
ikemon

score 39

前提・実現したいこと

http://sumaity.com/chintai/tokyo/?lid=smt10008
このサイトの検索フォームのように、項目を選択するだびに該当件数を表示させたいです。

試したこと

①WordPressのタグを使い検索機能を実装（タグに紐づく投稿記事が検索結果に該当）

②inputがクリックされる度に、チェックの入っているinputのvalueをAjaxでPHPファイル(search-kekka.php)に送る 

<form>
  <label><input type="checkbox" name="checkbox-group[]" value="18">ID:10</label><br>
  <label><input type="checkbox" name="checkbox-group[]" value="15">ID:15</label><br>
  <label><input type="checkbox" name="checkbox-group[]" value="13">ID:13</label><br>
</form>
<div id="result"></div>


<script type="text/javascript">
$(function(){
     $('input').change(function() {     //inputクリックで発生

       var checks=[]; //空の配列を用意
       $("[name='checkbox-group[]']:checked").each(function(){
           checks.push(this.value); //チェックのついているinputのvalueを全て配列に格納
       });
          $.ajax({ //ajaxによる非同期通信発生
               type: "POST", //POST送信でデータを受け渡す
               url: "search-kekka.php", //search-kekka.phpにデータを送る
               date: checks, //配列のデータを送る
               success: function(hoge) //接続が成功
                    {
                         $('#result').html(hoge); //該当件数を表示
                    },
               error: function(XMLHttpRequest,textStatus,errorThrown) //接続が失敗
                    {
                         alert('エラーです！'); //エラーを表示
                    }
          });
          return false;
     });
});
</script>
チェックの入っているinputのvalueが配列に格納されているかテストし、格納されていることを確認。

  console.log(checks);

→["18", "15", "13"]

③受け取ったvalueの値から該当する記事数を返す

search-kekka.php 

<?php require_once( dirname( __FILE__ ) . '/wp-load.php' ); ?>

<?php $atai = $_POST['checks']; //Ajaxで送信された配列を受け取る ?>

<?php
global $wpdb;
$myrows = $wpdb->get_results( "SELECT object_id FROM $wpdb->term_relationships WHERE term_taxonomy_id = '18' OR term_taxonomy_id = '15' OR term_taxonomy_id = '13'" ); //タグが該当する記事を習得
$gaitou = array(); //空の配列を用意
foreach ($myrows as $value) {
  $gaitou[] = $value->object_id; //ループを回して配列にobject_idを格納していく
  $gaitou_kensu = array_count_values($gaitou);
}
$count = count($gaitou_kensu);
echo $count;
// $input = $_POST['input'];
// echo $input);
?>

質問させていただきたいこと

PHPファイルに送られた配列情報をもとに、以下のように値によってSQLのWHERE条件を変更したいのですが 

※["18", "15", "13"]の場合
WHERE term_taxonomy_id = '18' OR term_taxonomy_id = '15' OR term_taxonomy_id = '13'
※["18", "15"]の場合
WHERE term_taxonomy_id = '18' OR term_taxonomy_id = '15'


このような吐き出しを実現するためのコードはどのように書けばいいでしょうか？

「そもそもこの方法では実現は難しい」「他に実装手段がある」などもございましたらご教授いただけましたら幸いです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

more_vert4 件の質問への追記・修正依頼

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

  • CHERRY

    CHERRY

    2017/03/06 13:51 編集

    WordPress の関数や変数を使うのであれば、PHPファイルの先頭で wp-load.php を読み込む必要がありますが、読み込まれていますか？

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/03/06 15:47

    WordPressでAjaxを使う場合は、/wp-admin/admin-ajax.phpにリクエストを送るなどの手順があるはずなので、一度その方向も調べてみてはどうでしょうか？

    キャンセル

  • ikemon

    ikemon

    2017/03/07 10:02

    CHERRY様　読み込まれておりませんでした…。wp-load.phpを読み込みましたら、正常にWordPress の関数や変数が使えました。ありがとうございます！

    キャンセル

  • ikemon

    ikemon

    2017/03/07 10:03

    miz様　admin-ajax.phpにリクエストを送るなどの手順も一度調べてみます！

    キャンセル

回答 1 件

checkベストアンサー

+1

phpには明るくないのですが、jqueryの記述で1点気になるところがあります。
$ajax命令で

 data: "#result", //結果を#resultに表示

と、指定していますが、ここは送るべきデータを指定すべき箇所なので、 

data : {"wpdb": $("#wpdbのあるID").val()}


と、送るべきではないでしょうか。
そうすれば、コメント欄で指摘されている点をクリアしていれば、
php側で $_POST['wpdb']とすれば、postされた変数を取得できるのではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/07 12:57

    ご指摘ありがとうございます！
    ```Javascript
    data: "#result", //結果を#resultに表示
    ```
    こちらの箇所おっしゃる通り間違っておりました。。

    キャンセル

  • 2017/03/07 13:19

    >PHPファイル(search-kekka.php)に配列情報を上手く送ることができませんでした。

    再度、jQuery側で・・。
    JSON形式で投げるのであれば、一般的な添え字を持つ配列ではなく、
    キーと値で設定される連想配列で送る必要があります。

    提示されたソースでルールに沿うのであれば、
    data : {"checks" : checks }
    と、すれば、"checks"をキーとする値(checksに束ねた配列)が、POSTされると思います。

    php内部での扱いは･･すみません、ちょっと詳しくないので・・・。

    キャンセル

  • 2017/03/07 14:30

    data : {"checks" : checks }
    ですが、date : {"checks" : checks }で先ほど試しており、動かないと判断しておりました…(ｽﾍﾟﾙﾐｽ)

    data : {"checks" : checks }
    で問題なくPOSTされました！ありがとうございます！

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る