Question

I am parsing the string returned from Cakephp 2.0 Controller..

My Autocomplete code is..

jQuery("#name").autocomplete( '<?php echo HTTP_PATH.'/lensmaterials/getBrands'; ?>', {
    multiple: true,
    mustMatch: true,
    matchContains: true,
    autoFill: false,
    dataType: "json",
    parse: function(data) {
        return $.map(data, function(item) {
            return { data: item, value: item.label, result: item.label};
        });
    },
    formatItem: function(item) {
        return '<li>' + item.label + '</li>';
    }
});

I am getting list like Value, than undefined , than value than undefined.
Its ending me with error in firebug. If I select than value is not entered in my textbox.
I want the Value in beautiful way. That is Div showing list in ul, li…

My Controller code is..

public function getBrands(){
    $brandList = $this->Brand->find('list',array('fields'=>array('id','brand_name'),'order' => array('Brand.brand_name')));
    //pr($brandList); exit;
    foreach ($brandList as $key => $name) {
        $json_output[]['id'] = $key;
        $json_output[]['label'] = $name;
    }
    echo json_encode($json_output);
    $this->autoRender = false;
}

Returning JSON string is

 [{"id":1},{"label":"Bvlgari"},{"id":2},{"label":"Chanel"},{"id":7},{"label":"D & G"},{"id":8},{"label":"Dior"},{"id":10},{"label":"Emporio Armani"},{"id":11},{"label":"Fendi"},{"id":12},{"label":"Giorgio Armani"},{"id":13},{"label":"Gucci"},{"id":14},{"label":"Oakley"},{"id":15},{"label":"Oliver Peoples"},{"id":16},{"label":"Paul Smith"},{"id":4},{"label":"Polo Ralph Lauren"},{"id":18},{"label":"Prada"},{"id":19},{"label":"Prada Linea Rossa"},{"id":20},{"label":"Ray Ban"},{"id":21},{"label":"Tiffany"},{"id":3},{"label":"Tom Ford"}]

Final its not returning as I type. That is I have Chanel and if I type than unformatted and undefined never continue with my keyup. It remains constant.

Answer 1

I think your data format is wrong. The id and label properties should be in the same object. Half of your objects don’t have a label property, so trying to access it will result in undefined (i.e. you get {data: {...}, value: undefined, result: undefined}).

Change your generation process to:

foreach ($brandList as $key => $name) {
    $json_output[] = array('id' => $key, 'label' => $name);
}

Then the output will be:

[{"id":1,"label":"Bvlgari"},{"id":2,"label":"Chanel"},...]