Custom Autocomplete Display and Value Submission

How-tos

tutorial, autocomplete, jui

2. Once user selects an item in the dropdown list and fill a hidden box with the id of the selected item for submission

##Making the right choice
To setup the autocomplete was a very straight forward operation, but I couldn't figure out how to get values from a custom JSON response and then fill the correspondent hidden fields.

CAutoComplete does hasve a way to do it, but I wanted to use CJuiAutoComplete to get all the cool features of its JQuery UiI and by looking at his code there was no method chain, something that is required to work with custom JSON responses as we need to override some methods.

##My SolutionNow that we have our beautiful widget that handles method chain in our Autocomplete, let's assume a couple of things:

* We saved our class onto a folder in our application -folder - ie protected/extensions * We have a hidden INPUT HTML element with model's attribute_id * We have created an action on our testController named autocomplete that returns a JSON object onf the following format: ```php // This function will echo a JSON object // onf this format:
// [{id:id, name: 'name'}]
public function actionAutocomplete(){'value' => $model->isNewRecord ? '': $model->attribute_value,
'options' => array(
'minCharsLength'=>3,
'autoFill'=>false,
'focus'=> 'js:function( event, ui ) {
$( "#test_autocomplete" ).val( ui.item.name );
return false;
}',