intro
AjaxによるZend Formでのオートコンプリートを行います。Dojoを使用しています。
デモサイトより動作を確認できます。
デモサイトより動作を確認できます。
1.コントローラの作成
以下のように
application/constorllers/LocaleController.php
ファイルを作成します。
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?php require_once 'Zend/Controller/Action.php'; require_once 'Zend/Form.php'; require_once 'Zend/Locale.php'; class LocaleController extends Zend_Controller_Action { public function getForm() { $form = new Zend_Form(); $form->setName('localeForm') ->setAction($this->_request->getBaseUrl() . '/locale/index') ->setMethod('post'); $decorators = array( 'ViewHelper', array('HtmlTag', array('tag' => 'dt', 'class' => 'submit')) ); $element = $form->createElement('text', 'element'); $element->setLabel('Locale') ->setAttrib('dojoType', array('dijit.form.ComboBox')) ->setAttrib('store', 'localeStore') ->setAttrib('autoComplete', 'true') ->setAttrib('hasDownArrow', 'true') ->setRequired(true) ->addFilter('stringTrim') ->addValidator('stringLength', false, array(1,10)); $submit = $form->createElement('submit', 'submit'); $submit->setLabel('Send') ->setDecorators($decorators); $form->addElements(array( $element, $submit )); return $form; } public function indexAction() { $form = $this->getForm(); if ($this->getRequest()->isPost()) { if ($form->isValid($_POST)) { $values = $form->getValues(); $this->view->values = $values; } } $this->view->form = $form; } public function processAction() { $data = Zend_Locale::getLocaleList(); $this->_helper->autoCompleteDojo(array_keys($data)); } } |
2.ビューの作成
以下のように
また以下のようにbodyタグのスタイルクラスを指定します。
application/views/scripts/locale/index.phtml
ファイルを作成します。
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 |
<h1><?= $this->translate('Your Locale'); ?></h1> <?php if($this->values) : ?> <h3><?= $this->translate('You just submitted the following values'); ?>:</h3> <ul> <?php foreach ($this->values as $value) :?> <li> <?= $this->escape($value); ?> </li> <?php endforeach; ?> </ul> <?php else : ?> <?= $this->form; ?> <?php endif; ?> <style type="text/css"> @import "<?= $this->baseUrl ?>/js/dijit/themes/tundra/tundra.css"; @import "<?= $this->baseUrl ?>/js/dojo/resources/dojo.css"; </style> <script type="text/javascript"> var djConfig = { isDebug:true, parseOnLoad:true }; </script> <script type="text/javascript" src="<?= $this->baseUrl . '/js/dojo/dojo.js'?>"> </script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dojox.data.QueryReadStore"); dojo.require("dijit.form.ComboBox"); dojo.require("dojo.data.ItemFileReadStore"); var localeStore = new dojo.data.ItemFileReadStore({ url:"<?=$this->url(array('action'=>'process'))?>" }); </script> |
また以下のようにbodyタグのスタイルクラスを指定します。
1 |
<body class="tundra"> |
3.確認
Webサーバにアクセスし、オートコンプリートが行われていることを確認してください。
履歴
日付 | 内容 |
---|---|
2008/4/29 | 公開 |
2008/4/29 | bodyタグのクラス指定を追記しました。 |