こんにちは sohnishi です。
typeahead.jsを使って入力補完機能を使ってみようと思います。
まずはhttps://github.com/twitter/typeahead.js/
からjsを落としましょう。
フロントのコード全文です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php echo $this->Html->script('typeahead.bundle.min', array('inline' => false)); ?> <?php $this->Html->scriptStart(array('inline' => false));?> $(function () { var hoges = new Bloodhound({ remote: '<?php echo $this->Html->url(array('plugin' => 'hoges', 'controller' => 'hoges', 'action' => 'typeahead', '?' => 'q=%QUERY')); ?>, datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.name); }, queryTokenizer: Bloodhound.tokenizers.whitespace, }); hoges.initialize(); $('#HogeHogevalue').typeahead({ hint: false, highlight: true, minLength: 2 }, { name: 'hoges', displayKey: 'name', source: hoges.ttAdapter() }); }); <?php $this->Html->scriptEnd();?> <?php echo $this->Form->create(); ?> <?php echo $this->Form->input('hogevalue'); ?> <?php echo $this->Form->submit('送信'); ?> <?php echo $this->Form->end(); ?> |
typeahead.bundle.min.jsを読み込み、
Bloodhoundを初期化します。
各オプションの説明は、
https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#options
に詳しく載っています。
その後、inputフィールドに対して、Typehead を有効にします。
サーバーサイドです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public function typeahead() { $this->autoRender = false; if ($this->request->is('ajax')) { $turm = $this->request->query['q']; $results = $this->Hoge->find('all', array( 'conditions' => array( 'Hoge.name LIKE' => $turm . '%' ) )); $hoges = array(); foreach ($results as $key => $result) { $val['id'] = $result['Hoge']['id']; $val['name'] = $result['Hoge']['name']; array_push($hoges, $val); } echo json_encode($hoges); } } |
受け取った値を元に検索し、値を返す。普通の処理です。
本日は以上です。それでは！