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

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

ただいまの
回答率

91.03%

  • PHP

    17722questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • CakePHP

    2125questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

  • Ajax

    957questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

CakePHP3+Ajaxで検索結果を表示する

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 199

gekota

score 2

前提・実現したいこと

CakePHP3.5 + Ajaxで検索を行い、検索結果を一覧表示する。
検索項目に更に入力すると絞り込み検索でリアルタイムで結果が変わる様にしたい。イメージとしてはGoogle検索バーの様な感じです。

発生している問題・エラーメッセージ

indexページでは、postsのデータは全て表示されています。
しかし、検索内容を入力しても、リアルタイムで絞り込み出来ません。
Enterキーを押すと絞り込み結果の画面にジャンプして絞り込み出来ている。

該当のソースコード

# View/Cell/PostCell.php

<?php
namespace App\View\Cell;

use Cake\View\Cell;

class PostCell extends Cell {
    public function ajaxSearch() {
        $this->loadModel('Posts');

        $keyword = (string)$this->request->query('keyword');

        $posts = $this->Posts->find('all', [
            'conditions' => [
                'post_status' => 'publish',
                'post_title LIKE' => "%$keyword%",
            ],
            'limit' => 20,
        ]);

        $this->set('posts', $posts);
    }
}
# Template/Cell/Post/ajax_search.ctp

<ul>
    <?php foreach ($posts as $post): ?>
        <li><?= $this->Html->link($post->post_title, '/?p=' . $post->ID) ?></li>
    <?php endforeach ?>
</ul>
# Template/Posts/index.ctp

<?php
$this->assign('title', '[CakePHP] AJAX リクエストを受けるアクションの実装例');
?>
<div class="content">
    <h1>[CakePHP] AJAX リクエストを受けるアクションの実装例</h1>
    <?php
    echo $this->Form->create(false, [
        'type' => 'get',
        'id' => 'ajax-search-form',
        'url' => ['action' => 'ajax_search'],
    ]);
    echo $this->Form->input('keyword', ['label' => '記事名で検索']);
    echo $this->Form->end();

    $fragment = $this->cell('Post::ajaxSearch')->render();
    ?>
    <div id="ajax-search-result"><?= $fragment ?></div>
</div>
<?= $this->Html->script('ajax') ?>
# Template/Posts/ajax_search.ctp

<?= $this->cell('Post::ajaxSearch')->render() ?>
# Controller/PostsController.php

<?php
namespace App\Controller;

use App\Controller\AppController;
use Cake\Network\Exception\ForbiddenException;

class PostsController extends AppController {

    public function index() {
    }

    public function ajaxSearch() {
        if (!$this->request->is(['ajax'])) {

        }
        $this->viewBuilder()->layout(false); 
    }
}

参照のデータベース

CREATE TABLE `posts` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) DEFAULT NULL,
  `body` text,
  `created` datetime DEFAULT NULL,
  `modified` datetime DEFAULT NULL,
  `post_title` varchar(50) DEFAULT NULL,
  `post_status` int(11) DEFAULT NULL,
  `name` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

試したこと

下記サイトを参考に作成してみました。
https://mbstring.com/techniques/ajax/

補足情報(言語/FW/ツール等のバージョンなど)

CakePHP3.5
VirtualBox
Vagrant

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+3

ajaxということはjavascriptから呼び出すわけですが、ajaxからphpを呼び出しているjavascriptのソースはどこでしょうか?
参考URLの「webroot/js/ajax.js」に当たる部分です。このままだと普通にPOSTしているだけのように見受けられます。
本来ですと、javascriptからphpに検索条件を送る部分、phpから実行結果を受け取って結果を表示する記述(javascript)が必要なはずです。

検索項目に更に入力すると絞り込み検索でリアルタイムで結果が変わる様にしたい。イメージとしてはGoogle検索バーの様な感じです。 

とのことなので、検索項目のonchange(form自体のonchangeの方が良いかもしれませんが)でajax通信を発生させるイベントをjavascriptで書かなければならないはずです。
※参考URLはあくまでsubmit時なのでボタンなどでsubmitさせないと動作しないようになっています。

$(function(){
 $("#ajax-search-form").on("change",function(){
       //検索条件受け取り
    //検索条件をPHPへ渡す(AJAX通信)
    //successでPHPから取得した検索結果でHTMLを書き換え
  });
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

check解決した方法

0

ご教授ありがとうございます。
確かに.jsファイルが抜けておりました。
それと、indexページにライブラリーを指定されていないのが原因でした。

// webroot/js/ajax.js

    +function($) {
        var $form = $('#ajax-search-form');
        var $result = $('#ajax-search-result');


        // フォーム送信イベント
        $form.on('keyup', function() {
            var url = $form.attr('action');
            var data = $form.serialize();
            console.log('■■keyup');
            // ここで AJAX リクエストを実行しています。
            $.get(url, data).done(function(data) {
                $result.html(data);
            });

            return false;
        });

        // キー入力中も一定間隔で送信するようにしています。
        var t;
        $form.find('[name="keyword"]').on('input', function() {
            clearTimeout(t);
            t = setTimeout(function() {
                console.log('■■自動');
                $form.triggerHandler('submit');
            }, 300);
        });
    }(jQuery);
<?php
$this->assign('title', '[CakePHP] AJAX リクエストを受けるアクションの実装例');
?>
<div class="content">
    <h3>[CakePHP] AJAX リクエストを受けるアクションの実装例</h1>
    <?php
    echo $this->Form->create(false, [
        'type' => 'get',
        'id' => 'ajax-search-form',
        'url' => ['action' => 'ajax_search'], // AJAX リクエスト送信先のアクション
    ]);
    echo $this->Form->input('keyword', ['label' => '記事名で検索']);
    echo $this->Form->end();

    // 初期表示用の HTML の断片を得るために AJAX セルを実行しています。
    $fragment = $this->cell('Post::ajaxSearch')->render();
    ?>
    <div id="ajax-search-result"><?= $fragment ?></div>
</div>

<!-- 追加 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<?= $this->Html->script('ajax') ?>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • PHP

    17722questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • CakePHP

    2125questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

  • Ajax

    957questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。