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

Question

###前提・実現したいこと
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

Answer 1

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を書き換え
  });
});

Answer 2

ご教授ありがとうございます。
確かに.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') ?>