やりたいこと
・Getパラメータを利用した、テキスト検索フォームの実装
(https://samples.com?word=hogeで、文字列”hoge”を含むデータを検索する)
・文字列がスペースで区切られている際はAND検索
(”hoge piyo”であれば”hogeかつpiyo”)
検索フォーム(テキスト入力とリセット)・検索結果の一覧
//templates/samples/index.php
//検索フォーム
<div class="search">
<input id="search-word" type="search" name="search" value="<?= $searchWord ?>">
<button id="search-word-reset">×</button>
</div>
//結果の一覧表示
<?php foreach($results as $result){
var_dump($result);
}?>
jQueryで検索フォームを動かす
//検索時(input上でenterキーで挙動)
$(document).on("keydown", "#search-word", function (e) {
//enterキーで検索実行
if (e.which === 13) {
e.preventDefault();
const searchWord = $("#search-word").val();
// 現在のURLからURLオブジェクトを作成
const currentUrl = new URL(window.location.href);
// URLのSearchParamsを取得し、'word'パラメータを設定または更新
currentUrl.searchParams.set("word", searchWord);
// 更新されたURLでページをリダイレクト
window.location.href = currentUrl.href;
}
});
//検索条件クリアボタン
$(document).on("click", "#search-word-reset", function (e) {
const currentUrl = new URL(window.location.href);
// URLのSearchParamsを取得し、'word'パラメータを削除
currentUrl.searchParams.delete("word");
// 更新されたURLでページをリダイレクト
window.location.href = currentUrl.href;
});
※searchParamsについての詳細は下記をご参照のこと
バックエンド(Controller)
//src/ControllerSamplesController.PHP
//...省略
class SamplesController extends AppController{
private $samplesTable;
public function beforeFilter(\Cake\Event\EventInterface $event)
{
$this->samplesTable = $this->getTableLocator()->get('Samples');
}
public function index($slug = null)
{
//クエリパラメータを受け取る
$searchWord = h($this->request->getQuery('word'));
//検索ワードを半角スペースで分割
$searchWordsArray = preg_split('/[\s\u{3000}]+/u', $searchWord);
$results = $this->samplesTable->find();
foreach($searchWordsArray as $word){
$results = $results->where(['name LIKE' => '%' . $word . '%');
}
$results = $results->all();
$this->set(compact('results', 'searchWord'));
}
}
※クエリビルダー(Cakephpにおけるsqlクエリの生成)については下記をご参照のこと
参考
・CakePHP公式:クエリービルダー
・mdn web docs:URLSearchParams
コメント