Mission:

Implement autocomplete of departments(saved in departments table) in employee form field called department. A user enters a few spellings of department name That brings up list of the names matching departments The user select one and that's it.

Platforms

1. CakePhp 2.1
2. Jquery UI Autocomplete(part of Jquery UI library version 1.8.18)

Database Model

Emplyee (id, first_name,last_name,department_id) department(id,name)

so in my add.ctp file ajax call is something like

      $( "#auto_complete" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url:  "/employees/showDepartment",
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    alert("success--");
                    response( $.map( data, function( item ) {
                    //alert(item);
                        return {
                            label: item.name,
                            value: item.id
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });

i have a action in my EmployeeController called show_depatment()

    public function getAddress() {
        $this->autoRender = false;// I do not want to make view against this  action. 
        $this->log($this->params->query['name_startsWith'] , 'debug');
        $str = $this->params->query['name_startsWith'];
        $this->log($str, 'debug');
        $this->layout = 'ajax';
        $departments = $this->Employee->Department->find('all', array( 'recursive' => -1,
            'conditions'=>array('Department.name LIKE'=>$str.'%'),
   'fields'=>array('name', 'id')));
        //$this->set('departments',$departments);
        $this->log($departments, 'debug');
        echo json_encode($departments);
}

I dont want show_department action to have any view so i have made $this->autoRender = false;

but it is not working as expected.

when i debug the response using firebug in response and HTLM section it shows

           [{"Department":{"name":"Accounting","id":"4"}}] // when i type "acc" in input field

Question

1. How to make it to display in form field.
2. echo json_encode($departments); is it right method of sending response in json format?
3. when i alert in sucess part of ajax call (alert(item);) it gives error as "undefined"