Zend Formでのオートコンプリートの使用

intro

AjaxによるZend Formでのオートコンプリートを行います。Dojoを使用しています。
デモサイトより動作を確認できます。

1.コントローラの作成

以下のようにapplication/constorllers/LocaleController.phpファイルを作成します。

<?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));
    }
}

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.ビューの作成

以下のようにapplication/views/scripts/locale/index.phtmlファイルを作成します。

<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>

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; ?>

@import "<?= $this->baseUrl ?>/js/dijit/themes/tundra/tundra.css";

@import "<?= $this->baseUrl ?>/js/dojo/resources/dojo.css";

</style>

var djConfig = {

isDebug:true, parseOnLoad:true

};

</script>

src="<?= $this->baseUrl . '/js/dojo/dojo.js'?>">

</script>

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タグのスタイルクラスを指定します。

<body class="tundra">

1	<body class="tundra">

3.確認

Webサーバにアクセスし、オートコンプリートが行われていることを確認してください。

履歴

日付	内容
2008/4/29	公開
2008/4/29	bodyタグのクラス指定を追記しました。

Zend_Formでのオートコンプリートの使用

コメントを残す