Autocomplete issue in Yii

Question

I'm using this auto-complete plugin with my new project. It's working fine. See image

But I want to populate these fields when I select the result.

Here is my code:

 var as = $("#query" + x + "").autocomplete({
        minChars: 1,
        maxHeight: 100,
        serviceUrl: 'index.php?r=purchaseorder/list',

    });

IN CONTROLLER

    public function actionList() {
    $criteria = new CDbCriteria;
    $criteria->select = array('id','description','unit','rate');
    $criteria->addSearchCondition("description", $_GET['query']);
    $criteria->limit = $this->limit;


    $items = Item::model()->findAll($criteria);
    $suggestions = array();
    $data = array();
    foreach ($items as $c) {
        $suggestions[] = $c->description;
        $data[] = $c->id;
    }
    header('Content-type: application/json; charset=utf-8');

    echo CJSON::encode(
            array(
                'query' => 'q',
                'suggestions' => $suggestions,
                'data' => $data
            )
    );
    exit;
}

grid jquery

  jQuery("#addrow").click(function() {

        jQuery(".item-row:last").after('<tr class="item-row">\n\
<td>\n\
<span id="delete' + x + '" style="cursor: pointer" class="icon-remove"></span>\n\
</td>\n\
<td class="item-code"><input autocomplete="off" name="code[]" id="code' + x + '" type="text" class="input-code"/></td>\n\
<td class="item-description"><input autocomplete="off" name="q" id="query' + x + '" type="text" class="input-description"/></td>\n\
<td class="item-unit"><input readonly autocomplete="off" name="unit[]" id="unit' + x + '" type="text" class="input-unit"/></td>\n\
<td class="item-qty"><input name="qty[]" autocomplete="off" value="0" id="qty' + x + '" type="text" class="input-qty"/></td>\n\
<td class="item-rate"><input readonly name="rate[]" autocomplete="off" value="125.25" id="rate' + x + '" type="text" class="input-rate"/></td>\n\
<td class="item-discount"><input name="discount[]" autocomplete="off" value="0.00" id="discount' + x + '" type="text" class="input-discount"/></td>\n\
<td class="item-total"><input name="total[]" readonly autocomplete="off" value="0.00" id="total' + x + '" type="text" class="input-amount"/></td>\n\
</tr>');

controller is already there

Answer 1

I have done it like this... IN JQUERY....

var as = $("#query").autocomplete({
        minChars: 1,
        maxHeight: 100,
        serviceUrl: 'index.php?r=purchaseorder/list',
        onSelect: function(suggestion) { 
            var row = $(this).closest('tr');
            row.find('.input-code').val(suggestion.id).attr('readonly', 'readonly');
            row.find('.input-description').attr('readonly', 'readonly');
            row.find('.input-unit').val(suggestion.unit).attr('readonly', 'readonly');
            row.find('.input-rate').val(suggestion.rate).attr('readonly', 'readonly');
            row.find('.input-qty').focus();
        }       
    });

AND THEN IN CONTROLLER

    public function actionList() {
    $criteria = new CDbCriteria;
    $criteria->select = array('description', 'id','unit','rate');
    $criteria->addSearchCondition("description", $_GET['query']);
    $criteria->limit = $this->limit;

    $items = Item::model()->findAll($criteria);
    $suggestions = array();
    $x=0;
    foreach ($items as $c) {
        $suggestions[$x]['value'] = $c->description;
        $suggestions[$x]['id'] = $c->id;
        $suggestions[$x]['rate'] = $c->rate;
        $suggestions[$x]['unit'] = $c->unit;
        $x++;
    }
    header('Content-type: application/json; charset=utf-8');

    echo CJSON::encode(
            array(
                'suggestions' => $suggestions,
            )
    );
    exit;
}

thats it...!

Answer 2

Sample code as shown below

$('#yourautoCompleteId').change(function(){
    var selecteddata=$(this).val();
    $.ajax({
        url: "'.$this->createUrl('Controller/yourMethod').'",
        data: {
            //special:specialisation,
            data   :selecteddata,
            },
            type:"GET",//you can also use POST method
            dataType:"html",//you can also specify for the result for json or xml
            success:function(response){
                //write the logic to get the response data as u need and set it to the fields 
                $("#dataId").val("SetHere");
                $('#quantityId').val("setHere");
             },
             error:function(){
                    //TODO: Display in the poll tr ifself on error   
                    alert("Failed request data from ajax page"); 
                }
        });
})

get the data in the controller using post and query with this data and send the result as u need and set to the fields as shown in the sample