Autocomplete field with Zend Framework and Dojo

Posted at novembre 6, 2009 // Javascript, PHP, Zend Framework
Easy AdSense by Unreal

In this exemple, we will se how to create an autocomplete field with Zend Framework and Dojo in the ZF MVC environment. We will use the QueryReadStore Dojo component to load new data when input value change.

Initialize Dojo in your layout

In the header of your layout, you must be able to load Dojo in page that need it loaded only to not overload other page that doesn’t have Javascript in it.

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php echo $this->doctype('XHTML1_STRICT');?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<?php echo $this->headTitle($request->getActionName())
	->headTitle($request->getControllerName());?>
<?=$this->headLink()
	->appendStylesheet($this->theme_url.'/css/style.css')
	->headLink(array('rel' => 'favicon', 'href' =>'/images/favicon.ico'), 'PREPEND');?>
<?=$this->headMeta()
        ->appendHttpEquiv('expires', 'Wed, 26 Feb 1997 08:21:57 GMT')
        ->appendHttpEquiv('pragma', 'no-cache')
        ->appendHttpEquiv('Content-Type', 'text/html;charset=UTF-8')                 
        ->appendHttpEquiv('Cache-Control', 'no-cache');?>                 
<?php if ($this->dojo()->isEnabled()){
   $this->dojo()->setLocalPath($this->BaseUrl().'/plugins/dojo/dojo.js')
         ->addStyleSheetModule('dijit.themes.tundra');
   echo $this->dojo();
}?>
</head>

This code will add all javascript library needed and css style in the head of your page.

Setup the form and choose the good element

In your main view, you create the form and add the good element for your autocomplete input.

Dojo provide 2 type of Element : FilteringSelect and ComboBox. For this exemple, I have choose the FilteringSelect element.

1
2
3
4
5
6
7
8
9
10
11
12

<?php $form = new Zend_Form;
$element = new Zend_Dojo_Form_Element_FilteringSelect('id');
$element->setAutoComplete(true)
			->setStoreId('tidStore')
			->setStoreType('dojox.data.QueryReadStore')
			->setStoreParams(array('url'=>$this->BaseUrl().'/admin/translate/autocomplete'))
			->setAttrib("searchAttr", "id")
			->setRequired(true);
$submit = $form->createElement('submit', 'submit');
$form->addElements(array($element, $submit));
print $form;
?>

Providing data for the autocomplete field

Now in the controller, we create a new action autocompleteAction to generate data in json format.
In this function, you must disable the view renderer and the layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public function autocompleteAction() {
        $this->_helper->viewRenderer->setNoRender();
        $this->_helper->layout->disableLayout();
        $id = $this->_getParam("id", "");
        $id = substr($id, 0, -1); //fix : remove * at the end of the ID.
 
        $MyTable= MyTable::getInstance();
        $select = $MyTable->select(true, array("id"))->limit(5)
        $select->where('id LIKE ?', "%".$id."%");
        $results = $MyTable->fetchAll($select);
        $data = new Zend_Dojo_Data('id', $results);
 
        // Send our output
        $this->_helper->autoCompleteDojo($data);
    }

This action will be called by the form element each time the value will change in the input and add propose 5 new possibility for the user to select.

(This exemple was tested on Zend Framework 1.9.5 and Dojo 1.3.2)

Related posts:

  1. Zend_Form : How to remove decorator from hidden field.
  2. How to use Flickr with Zend Framework?
  3. Add language route to your Zend Framework project.
  4. Phenix_Wiki, a parser componant for Zend Framework

Tags : , , , , , , , , , , ,

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Facebook comments:

2 Comments

Leave Comment