Thread: ZendX Autocomplete: How to display different data and fill hidden formelements

I think I am a half step further, but stuck on the right methods?

The documentation of the jQuery.ui shows different ways of how to define the "callback" function and the "formatItem" function.
Normally I just have to pass the Option "formatItem:someJSFunction" to define my own function (placed in my view phtml) to style the items like this:

Code:

function formatItem(row) {
	return "<span onClick='selectItem("+row[0]+")'>"+ row[0] +" ("+ row[1] +")</span>";
}

But if I pass this option to my ZendX_JQuery_Form_Element_AutoComplete Object via

Code:

->setJQueryParam('formatItem','formatItem')

nothing happens.

Also a self coded "onclick" or "select" function is easy with normal jQuery.
It depends on the version you use:
For the ui jquery e.g.:

Code:

select:{function(event,ui){
    //some action
    alert(ui.item[0]);
};
})

which seems to be equal to this in ZendX:

Code:

->setJQueryParam('select','function(event,ui){alert(ui.item[0]);}')

But this also does not work.

The normal jquery wants to have a .result function as object like this:

Code:

$("#users_id").autocomplete("some/path/search.php", {
		minChars:3,
		formatItem:formatItem		
	}).result(function(event, item) {
			selectItem(item[0],item[1],item[2],item[3],item[4]);
	});

I tryed to follow the proxy in ZendX but I cannot find the right methods to implement.

Can someone help?

best regards...

I think I am a half step further, but stuck on the right methods?

The documentation of the jQuery.ui shows different ways of how to define the "callback" function and the "formatItem" function.
Normally I just have to pass the Option "formatItem:someJSFunction" to define my own function (placed in my view phtml) to style the items like this:

Code:

function formatItem(row) {
	return "<span onClick='selectItem("+row[0]+")'>"+ row[0] +" ("+ row[1] +")</span>";
}

But if I pass this option to my ZendX_JQuery_Form_Element_AutoComplete Object via

Code:

->setJQueryParam('formatItem','formatItem')

nothing happens.

Also a self coded "onclick" or "select" function is easy with normal jQuery.
It depends on the version you use:
For the ui jquery e.g.:

Code:

select:{function(event,ui){
    //some action
    alert(ui.item[0]);
};
})

which seems to be equal to this in ZendX:

Code:

->setJQueryParam('select','function(event,ui){alert(ui.item[0]);}')

But this also does not work.

The normal jquery wants to have a .result function as object like this:

Code:

$("#users_id").autocomplete("some/path/search.php", {
		minChars:3,
		formatItem:formatItem		
	}).result(function(event, item) {
			selectItem(item[0],item[1],item[2],item[3],item[4]);
	});

I tryed to follow the proxy in ZendX but I cannot find the right methods to implement.

Can someone help?

best regards...

Hi,

I have given up trying to do this functionality with ZendX. Maybe someone has a good idea how to implement this with ZendX:

I mixed it up now (Zend_Form and jQuery).

1. Creating a normal input element and a hidden id field with Zend_Form:

Code:

// create new element
	    $filter = $this->createElement('text', 'filter');
	    // element options
	    $filter->setLabel('Domain:');
	    $filter->setAttrib('size',40);
	    $filter->setAttrib('id','filter');
$this->addElement($filter);

Then in my list.phtml I create normal jQuery stuff, where it is very easy to implement:

Code:

$(document).ready(function() {
				
	$("#filter").autocomplete({
		source: "/order/search", 
		minChars:0,
		matchSubset:1,
		selectOnly:1,
		focus: function(event, ui) {
			$('#filter').val(ui.item.domain);
			return false;
		},
		select:function(event, ui) {
			$('#filter').val(ui.item.domain);
			$("#orders_id").val(id);
                }
	})
	.data( "autocomplete" )._renderItem = function( ul, item ) {
		return $( "<li></li>" )
		.data( "item.autocomplete", item )
		.append( "<a>" + item.domain + "<br>" + item.alias + "</a>" )
		.appendTo( ul );
	};
});

Instead of placing the functions inline, you can also separe them and call them by their name after the equal.

This works nice, but I really want to realize this by ZendX.
Any idea???

regards

Hi ZBI,
I have the same issue.
I think the problem is in quotes. I tried with Firebug to change the code and it's right!
My code generated from ZendX_JQuery was:

Code:

$(document).ready(function() {
 $("#idcity").autocomplete({"source":"\/utility\/search.city","select":"function(event, ui) { alert ('view me?'); }"});
});

Nothing happens.

Remove quotes on select and works nice:

Code:

$(document).ready(function() {
 $("#idcity").autocomplete({"source":"\/utility\/search.city",
 "select": function(event, ui) { alert ('view me?'); }
});
});

Exactly, functions don't need quotes!

Why ZF add quotes I do not know... :-(

Hi ZBI,
I resolved this issue.
Look at my code:

MyForms.php

Code:

$jqElement = new ZendX_JQuery_Form_Element_AutoComplete('idcity');
            $jqElement->setLabel( $this->translate('City') )
                        ->setFilters(array('StringTrim'))
                        ->setValidators(array('NotEmpty'))
                        ->setRequired(true)
                        ->setJQueryParam("source", "/utility/search.city")
                        ->setJQueryParams( array("select" => new Zend_Json_Expr("function() { alert ('-'); }") ) )
                        ->setDecorators($this->_myElementJQueryDecorator);
            $this->addElement($jqElement);

As you see we have to add an instance of Zend_Json_Expr.
So the code generated from ZendX will be created without quotes!

Hi Jazzo,

there is only one of three parts resolved.

Ok, with a Zend_Json_Expr you can add a function now, this is a big step.

But when I add the "focus" function:

Code:

->setJQueryParam( array("focus" => new Zend_Json_Expr(
	    								"function() { 
	    									alert ('focus'); }")
	    							)
	    						)

the generated html code for this is "Array":null, like this:

Code:

 $("#test").autocomplete({"source":"\/order\/search","Array":null,"select":function() { 
	    									alert ('select'); },"minLength":3});

It seems like this version does not support the key "focus".
Same procedure with the key renderItem (old jQuery Version) or the object class .data( "autocomplete" )._renderItem
(See the above jquery function of my list.phtml)

My last whole ZendX autocomplete field code:

Code:

$test = new ZendX_JQuery_Form_Element_AutoComplete('test');
	    $test->setLabel("Domain:")
	    		->setJQueryParam('source','/order/search')
	    		->setJQueryParam( array("focus" => new Zend_Json_Expr(
	    								"function() { 
	    									alert ('focus'); }")
	    							)
	    						)
	    		->setJQueryParams( array("select" => new Zend_Json_Expr(
	    								"function() { 
	    									alert ('select'); }")
	    							 )
	    		  				)
	    		->setJQueryParam('minLength',3)
	    		->setAttrib('size',40);
	    $this->addElement($test);

I miss the focus and the renderItem definition. Do you found a solution to this? Maybe the renderItem can be solved with the decorator, but I could not make it work.

Does someone have a idea?

For the focus options try:

Code:

->setJQueryParams( array("focus" => new Zend_Json_Expr(
	    						"function() { 
	    							alert ('focus'); }")
	    						)
	    					)

If you set options with array have to use setJQueryParams and not setJQueryParam.
If you prefer to use setJQueryParam you have to remove the array:

Code:

->setJQueryParams( "focus" => new Zend_Json_Expr(
	    					"function() { 
	    						alert ('focus'); }")
	    				)

Now I have another issue.
When I set formatItem regular expression is created right but nothing happens.
I think I have to check my jQueryUI version and its compatibility.

Oh yes, damn copy&paste, I did not mentioned the missing s of the method call... Now the focus work.

So we´ve got one task more to figure out... Then we can step on with new great ideas
I looked into the ZendX code of the js creation process in function autoComplete (ZendX/JQuery/View/Helper/AutoComplete.php

Seems like there is no implementation of the following attributes (e.g. .data) of the autocomplete object like this:

Generete html code part:

$("#test").autocomplete(...here are the normal setJQueryParams reachable by ZendX...).data( "autocomplete" )._renderItem = .......

How can we address this?

Hi ZBI,
after a thorough analysis I have come to a conclusion.
When a component in a Framework become inflexible and difficult to maintain I believe is time to change way. ZendX_Jquery is powerful but not in the autocomplete jQuery UI. Now we are at a dead end and we can only wait a new release. I prefer to change my way and go ahead.
I wrote my solution here:

Zend Form, jQuery and UI autocomplete