Demo: AJAX Autocompleter with Script.aculo.us and a Zend JSON web service

Today I'm posting a sample project of a modification of a Script.aculo.us auto-completer script that will work with a Zend JSON web service. This example could easily be expanded by providing a richer data collection to the client (currently it's just a string array).

Here's a demo:

Implementing the code is really only one line once you have the back end web service configured:

 var demoAutocompleter = new MyAjaxAutocompleter('tbAutoCompleter', 'dvAutoCompleter', '/demo/html/Ajaxservice/index', {});

where 'tbAutoCompleter' corresponds to the textbox you wish to bind, 'dvAutoCompleter' is the control in question and '/demo/html/Ajaxservice/index' is the actual Web service giving you JSON data.

I'm still having a hard time POSTing to a Zend controller in a manner as elegant as you would find in ASP.NET's web services, however the code isn't really that bad. My AjaxServiceController looks like this:

class AjaxserviceController extends Zend_Controller_Action
{
	public function init()
	{
		$this->_helper->contextSwitch()
             ->addActionContext('index', 'json')
             ->initContext();
 
	}
 
	public function indexAction()
	{
 
       	$this->_helper->viewRenderer->setNoRender();
       	$this->_helper->getHelper('layout')->disableLayout();
 
       /* [Json response] */
		 $data = array("2008","3d","social","software","technology","tips",
"tools","toread","travel","tutorial",
"tutorials","tv","typography", "wiki","windows","wishlist","wordpress"
,"work","writing","youtube");
 
		 $responseData = $this->array_isearch($this->getRequest()->getParam('search') , $data);
 
       try {
 
           $responseDataJsonEncoded = Zend_Json::encode($responseData);
           $this->getResponse()->setHeader('Content-Type', 'application/json')
							   ->setBody($responseDataJsonEncoded);
 
       } catch(Zend_Json_Exception $e) {
           // handle and generate HTTP error code response, see below
       }
 
	}
 
    function array_isearch($str, $array) {
    	$returnArray = array();
        foreach($array as $v) {
            if(preg_match('/$str/i',$v))
            	$returnArray[] = $v;
 
        }
        return $returnArray;
    }
}
 

There's not much here, mostly just disabling the Zend Layout, specifying the content and doing the search. The $data array could easily be replaced with a data source (like a collection from Zend_Db).

Download Ajax Auto Completer Sample Zend Framework 1.5 project

The nice thing about web service AJAX controls is that they live independently of the application calling them, so you can essentially separate out your data layer in the same way that you would separate Zend_Db resources from a Zend_Controller.