Qbilinux 日記

Linux に関係することだけではなく,最近は一般的なコンピュータやガジェット関係についても記載してます.

cakephp3 での jquery ui の autocomplete 実装例について

久しぶりに cakephp3 関係の tips でも.

今回は autocomplete についてちょっと書いてみようかなと思います.

autocomplete とは検索フォームなどに文字を入れると,それにヒットしたものが自動でリストアップされる機能ですね.
今回は jquery に autocomplete 機能がありますのでそれを利用する形で実装してみます.

最初に Controller 側の関数作成.下記のような感じかな.

public function autocomplete() {
$this->autoRender = false;
$terms = $this->Users->find('list')
->where([
'or' => [
'Users.name LIKE' => '%'. trim($this->request->query['term']) . '%',
'Users.kana LIKE' => '%'. trim($this->request->query['term']) . '%'
]
]);
echo json_encode($terms);
}

関数名は別に autocomplete である必要はありません.適当な名前でいいです.term で渡された文字列に対して検索結果を json で返してあげればいいです.

検索条件を変更したい場合には where の中を適宜修正すればいいでしょう.belongsTo とか hasMany などのアソシエーションを持つモデル中のパラメータを検索条件に追加する場合には contain 等も追加するのを忘れないように.たとえばこんな感じかな.

$terms = $this->Users->find('list')
->where([
'or' => [
'Users.name LIKE' => '%'. trim($this->request->query['term']) . '%',
'Users.kana LIKE' => '%'. trim($this->request->query['term']) . '%',
],
'Users.expired' => false,
'UserProfiles.birthday IS NOT' => null
])
->contain(['UserProfiles']);

で,autocomplete の動作を確認.ブラウザから /Users/autocomplete?term=test にアクセスして動作確認をしましょう.term の後ろが検索したい文字列なので色々と確認すればいいかと思います.json 形式で find の結果がリスト表示されればオッケーです.

この関数ですけど,全体に acl でアクセス制限をかけている場合にはアクセスできるようにパーミッションを許可してあげないとダメかなと思います.なので,セキュリティ的な注意が必要ですね.

次,template 側.

jquery ui の autocomplete を利用するので jquery.js, jquery-ui.css, jquery-ui.js を読み込む必要があります.

全体としてはこんな感じかな.



Html->css('jquery-ui') ?>
Html->script(['jquery', 'jquery-ui']) ?>

<script>
$( function() {
$( "#autocomplete" ).autocomplete({
source: 'Url->build(['controller' => 'Users', 'action' => 'autocomplete']); ?>',
autoFocus: true,
delay: 500,
minLength: 3
});
} );
</script>

Form->input('keyword', ['type' => 'text', 'id' => 'autocomplete']); ?>

source: には Controller に記述した action の url を記述してください.url の記述方法ですが,jquery ui の autocomplete 関数の方で勝手に "?term=" は追加されるので source: の個所に "?term=" は記述する必要はありません.その他のパラメータは jquery のマニュアルを見て好みに設定すればいいでしょう.マニュアルは https://jqueryui.com/autocomplete/ とか http://api.jqueryui.com/autocomplete/ のあたり.

で,ブラウザからフォームに文字列を入力して動作確認しましょう.これで動作するはず.

と,こんなところかな.

実際にコードが動作するか確認していないのでちょっと不安だけど...概略はこんな感じかなと.以上,参考まで.

CakePHP3 ビギナーズガイド: 最新のPHPフレームワークをマスターせよ! PRIMERシリーズ (libroブックス)
掌田津耶乃
Tuyano-Project