GetパラメータでWord検索フォームを作る【CakePHP4】

やりたいこと

・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

コメント

タイトルとURLをコピーしました