Why is ZendX Autocomplete not working?

Question

I'm setting up my first ZendX_JQuery_Form. In my controller, I've got the following code:

$form = new ZendX_JQuery_Form ();

$date1 = new ZendX_JQuery_Form_Element_DatePicker ( 'date1', array ('label' => 'Date:' ) ); $form->addElement ( $date1 );

$elem = new ZendX_JQuery_Form_Element_AutoComplete( 'ac1', array('label' => 'Autocomplete:')); $elem->setJQueryParams(array('source' => array('New York','Berlin','Bern','Boston'))); $form->addElement($elem); $this->view->form = $form;

And I'm including the required code in my Boostrap:

$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");

So the DatePicker is working perfect. But the AutoComplete field is just a plain text box, nothing showing up. And I can't figure out why.

Viewing the source, jQuery is being included ok (obviously is because the DatePicker works) and the events have been set up :

$(document).ready(function() {

$("#date1").datepicker({});
$("#ac1").autocomplete({"source":["New York","Berlin","Bern","Boston"]});

});

This is in the header:

<script type="text/javascript" src="/js/jquery/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

And the correct field is there:

<input type="text" name="ac1" id="ac1" value="" />

I'm dumbfounded! Please help.

Answer 1

You need the proper version of JQuery to use the Autocomplete feature. Instead if including locally, you can define the version numbers with the ZendX JQuery API, which is more elegant:

<?php echo $this->jQuery()->setVersion('1.7.1')->setUiVersion('1.8.2'); ?>

adding this line to the view templates (layout view template is recommended) the corresponding versions of the JQuery and the JQueryUI libraries will be included. By default, ZendX will include the Google CDN version of the libraries.

It also worths to note, it is possible to force ZendX to include these libraries in all cases, not just when ZendX thinks it's necessary. It could be important if you're adding autoLoad scripts. For an example, adding these lines in the IndexController action will make ZendX include the corresponding libraries at all times.

$jquery = $this->view->jQuery();
$jquery->enable();
$jquery->uiEnable();

Answer 2

Just realised that the code library for jquery ui that was automatically included (from Google code libraries) didn't have the autocomplete function. You need to manually set the localPath:

$this->jQuery ()->setUiLocalPath('/js/jquery/js/jquery-ui-1.8.2.custom.min.js');