Using CAutoComplete to display one value and submit another

Tutorials

deprecated, CAutoComplete

> Note: CAutoComplete is deprecated since Yii 1.1.3. Consider using CJuiAutoComplete.
 
 
Have you ever wanted to use an auto-complete field to look up a user or some other data, but want the database ID of that user or data returned as well so that you can more easily perform some function when the form is submitted? Thanks to [Yii's CAutoComplete widget](http://www.yiiframework.com/doc/api/CAutoComplete) and [jQuery's Autocomplete plugin](http://plugins.jquery.com/project/jq-autocomplete), it's really quite simple.

In overview, assuming that you are looking up and retrieving your data set for the autocomplete widget from a database, there are basically three steps:```php
<?php
//...Action public function actionAutoCompleteLookup() { if(Yii::app()->request->isAjaxRequest && isset($_GET['q'])) {           $name                = $_GET['q']; // /* q is the default varGET variable name that is used by
 
/ the autocomplete widget to pass in user input */
 
$limit               = $_GET['limit']; name = $_GET['q']; 
 
// this was set with the "max" attribute of the CAutoComplete widget $criteria limit = min($_GET['limit'], 50); 
 
$criteria = new CDbCriteria; $criteria->condition = "name LIKE :sterm"; $criteria->params    = array(":sterm"=>"%$name%"); $criteria->limit     = $limit; $userArray           = User::model()->findAll($criteria); $returnVal           = ''; foreach($userArray as $userAccount) { $returnVal .= $userAccount->getAttribute('name').'|'
 
                 .$userAccount->getAttribute('user_id')."\n"; } echo $returnVal; }    die();
 
    }
 
    //...
 
    ?>}
```
There are a few things to notice here:```php
<?php echo $this->widget('CAutoComplete', array(              'name'=>'user_name', //name of the html field that will be generated 'url'=>array('controller/action'),name'=>'user_name', 
 
//replace controller/action with real ids              'url'=>array('controller/action'), 
 
'max'=>10, //specifies the max number of items to display              'minChars'=>2,  
 
//specifies the number of chars that must be entered
 
 //before autocomplete initiates a lookup              'minChars'=>2, 
 
'delay'=>500, //number of milliseconds before lookup occurs 'matchCase'=>false, //match case when performing a lookup?              'htmlOptions'=>array('size'=>'40'),  
 
//any additional html attributes that go inside of
 
 //the input field can be defined here              'htmlOptions'=>array('size'=>'40'), 
 
 
'methodChain'=>".result(function(event,item){\$(\"#user_id\").val(item[1]);})",
));
?>Take note of the `methodChain` attribute being used. MethodChain essentially appends (or chains) a javascript method to the end of the AutoComplete javascript code that will be generated. This particular method is the `result` method, which fires when an autocomplete item is selected. The code inside of the result function basically references the hidden field that was defined and assigns the 2nd part (part after the pipe) of the selected autocomplete data to that field.

Now that the basics are out of the way, review the documentation for [Yii's CAutoComplete widget](http://www.yiiframework.com/doc/api/CAutoComplete) and [jQuery's Autocomplete plugin](http://plugins.jquery.com/project/jq-autocomplete) to find more ways to customize and use autocomplete functionality in your Yii project.