Home > Zend_Form > Ajax Auto Completion with Zend_Form

Ajax Auto Completion with Zend_Form

This article shows ajax auto completion with Zend_Form.
You can see the screens from the demonstration site.

1.Create Controller
Create the file application/constorllers/LocaleController.php with the following content.

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();
             ->setAction($this->_request->getBaseUrl() . '/locale/index')
        $decorators = array(
            array('HtmlTag', array('tag' => 'dt', 'class' => 'submit'))
        $element = $form->createElement('text', 'element');
                ->setAttrib('dojoType', array('dijit.form.ComboBox'))
                ->setAttrib('store', 'localeStore')
                ->setAttrib('autoComplete', 'true')
                ->setAttrib('hasDownArrow', 'true')
                ->addValidator('stringLength', false, array(1,10));
        $submit = $form->createElement('submit', 'submit');
            $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();
2.Create View
Create the file application/views/scripts/locale/index.phtml with the following content.

<h1><?= $this->translate('Your Locale'); ?></h1>
<?php if($this->values) : ?>
<h3><?= $this->translate('You just submitted the following values'); ?>:</h3>
  <?php foreach ($this->values as $value) <img src='http://www.oplabo.com/wp-includes/images/smilies/icon_confused.gif' alt=':?' class='wp-smiley' /> >
    <?= $this->escape($value); ?>
  <?php endforeach; ?>
<?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";
<script type="text/javascript">
var djConfig = {
    isDebug:true, parseOnLoad:true
<script type="text/javascript" 
    src="<?= $this->baseUrl . '/js/dojo/dojo.js'?>">
<script type="text/javascript">
var localeStore = new dojo.data.ItemFileReadStore({

Specify the style class of body tag.

<body class="tundra">

Access the web server and check ajax auto completion for the element.
Date Content
2008/4/29 Published
2008/4/29 Added description about specifying the style class of body tag.


Willem Luijk 09-02-17 (Tue) 19:33

This all seems a nice post and theory but what if this form itself is loaded by an ajax call? How to you inject the Javascript of the view in the page of the client and get it executed?

oplabo 09-02-18 (Wed) 9:22

If you can use jquery, you can load a form html with the following code.

    url: "/yourController/yourAction/format/html/",
    cache: false,
    success: function(html){

In your controller, please use ajaxcontext.

    $ajaxContext = $this->_helper->getHelper('AjaxContext');
    $ajaxContext->addActionContext('yourAction', 'html')->initContext();

And create the file yourAction.ajax.phtml in your view script folder. It could be same with the above index.phtml file.

Comment Form
Remember personal info


Trackback URL for this entry
Listed below are links to weblogs that reference
Ajax Auto Completion with Zend_Form from Open Programming Laboratory

Home > Zend_Form > Ajax Auto Completion with Zend_Form


Return to page top