Zendx JQuery Autocomplete

Question

I've been trying to get the Zend Jquery autocomplete function working, when i noticed this section in the Zend documentation.

The following UI widgets are available as form view helpers. Make sure you use the correct version of jQuery UI library to be able to use them. The Google CDN only offers jQuery UI up to version 1.5.2. Some other components are only available from jQuery UI SVN, since they have been removed from the announced 1.6 release.

autoComplete($id, $value, $params, $attribs): The AutoComplete View helper will be included in a future jQuery UI version (currently only via jQuery SVN) and creates a text field and registeres it to have auto complete functionality. The completion data source has to be given as jQuery related parameters 'url' or 'data' as described in the jQuery UI manual.

Does anybody know which svn url tag or branch i need to download to get a javascript file with the autocomplete functions available in it?

At the moment, my Bootstrap.php has

    $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper'); 
    $view->jQuery()->enable();
 $view->jQuery()->uiEnable();
 Zend_Controller_Action_HelperBroker::addHelper(
     new ZendX_JQuery_Controller_Action_Helper_AutoComplete()
 );

    // Add it to the ViewRenderer
    $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
    $viewRenderer->setView($view);
 Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

In my layout, i define the jquery ui version i want

<?php echo $this->jQuery()
 ->setUiVersion('1.7.2');?>

Finally my index.phtml has the autocomplete widget

<p><?php $data = array('New York', 'Tokyo', 'Berlin', 'London', 'Sydney', 'Bern', 'Boston', 'Baltimore'); ?>
<?php echo $this->autocomplete("ac1", "", array('data' => $data));?></p>

I'm using Zend 1.8.3 atm.

Answer 1

Last time I checked, it was in the dev branch.

The only issue is that I'm not sure how complete and ready this is, and if it even works with ZendX_Jquery. You can stay up to date on the progress of autoComplete on the official wiki page.

Answer 2

I exported the code from the link provided by Till above and copied the ui.autocomplete.[js & css] to the public folder of my ZEND app, into a sub folder i called 'js/autocomplete'.

My updated code now looks like

Bootstrap.php : add the extra autocomplete js script to the page

$view->jQuery()->addJavascriptFile('/js/autocomplete/ui.autocomplete.js');

layout.phtml : add autocomplete css and jquery theme, i also say to use the latest version of jquery

<?php echo $this->jQuery()
 ->setUiVersion('1.7.2')
 ->addStylesheet('/js/autocomplete/ui.autocomplete.css')
 ->addStylesheet('/js/jquery-ui-1.7.2/development-bundle/themes/ui-lightness/jquery-ui-1.7.2.custom.css');?>

index.phtml : this is a copy paste code sample from the Zend documentation.

<h3>AutoComplete</h3>
<p><?php $data = array('New York', 'Tokyo', 'Berlin', 'London', 'Sydney', 'Bern', 'Boston', 'Baltimore'); ?>
<?php echo $this->autocomplete("ac1", "", array('data' => $data));?></p>

Works like a charm. :-)

Your final html should have the following structure in the head element.

<link rel="stylesheet" href="/js/autocomplete/ui.autocomplete.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/js/jquery-ui-1.7.2/development-bundle/themes/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="/js/autocomplete/ui.autocomplete.js"></script>

Answer 3

Great...After a long try i found this post and my autocomplete is working but the fault is i cant see the selection list, i think error with my css. Pressing Tab completes the text.I Will conquer it later.Any other resources for jquery in zend form and tabbed form ???

Answer 4

Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'JQuery' was not found in the registry; used paths: ZendX_JQuery_View_Helper_: ZendX/JQuery/View/Helper/ Zend_View_Helper_: Zend/View/Helper/' in /var/www/vcred/library/Zend/Loader/PluginLoader.php:400 Stack trace: #0 /var/www/vcred/library/Zend/View/Abstract.php(1117): Zend_Loader_PluginLoader->load('JQuery') #1 /var/www/vcred/library/Zend/View/Abstract.php(568): Zend_View_Abstract->_getPlugin('helper', 'jQuery') #2 /var/www/vcred/library/Zend/View/Abstract.php(335): Zend_View_Abstract->getHelper('jQuery') #3 [internal function]: Zend_View_Abstract->__call('jQuery', Array) #4 /var/www/vcred/application/Bootstrap.php(40): Zend_View->jQuery() #5 /var/www/vcred/library/Zend/Application/Bootstrap/BootstrapAbstract.php(636): Bootstrap->_initAutoload() #6 /var/www/vcred/library/Zend/Application/Bootstrap/BootstrapAbstract.php(589): Zend_Application_Bootstrap_BootstrapAbstract->_executeResource('autoload') #7 /var/www/vcred/library in /var/www/vcred/library/Zend/Loader/PluginLoader.php on line 400

Answer 5

It's incredible, but with the same code, doesn't work In fact, with "autocomplete" doesn't work. If I write "autoComplete", then the source code generated it's ok, but the autocomplete doesn't work...

Any solutions? Anybody has some example of "autocomplete" working fine?

Maybe I have wrong the ZendX libraries... Where can I find the good ones?

Thanks :-)

Answer 6

Hi, I had the same issue. I made some changes to the ZendX/JQuery/Autocomplete.php file. Change the following line $params['source'] = $params['data']; to $params = $params['url'];

and this worked for me. Thought of sharing this with anyone who needs this.

Thanks, Decosian

Answer 7

I nearly surrendered to get the autocompletion working with ZendX. Then i found this: http://www.zendcasts.com/autocomplete-control-with-zendx_jquery/2010/07/