Why Jquery-ui autocomplete is not working in codeigniter?

Question

I am building a blog application. I have a search box which will suggest the categories as user types. So I use jquery-ui autocomplete. But not sure why its not working. I am new to it and spend a whole day. please help. Here is my code.

Model:

public function getCategoriesJson ($keyword) {

    $this->db->select('cat_name');
    $this->db->from('categories');
    $this->db->like('cat_name', $keyword);

    $data = $this->db->get()->result_array();

    $output = array();

    if ($data) {
        foreach ($data as $d) {
            array_push($output, $d['cat_name']);
        }
    }

    echo json_encode($output);
}

view:

Controller:

public function getCatJson () {

    $this->Category_model->getCategoriesJson($this->input->get('query'));
}

Script:

$('#search').autocomplete({

    source: '<?php echo base_url(); ?>categories/getCatJson?query=' + $('#search').val(),

    minLength: 1
});

Answer 1

Finally, I have got a solution. I changed my model function code and my script like below and it works.

Model:

public function getCategoriesJson($keyword)
{
        $this->db->select('cat_name');
        $this->db->from('categories');
        $this->db->like('cat_name', $keyword);

        $data = $this->db->get()->result_array();

        $output = array();

        if($data)
        {
            foreach($data as $d)
            {
                array_push($output, ['label' => $d['cat_name']]);
            }
        }

        echo json_encode($output);
}

Script:

$("#search").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<?php echo base_url(); ?>categories/getCatJson',
                type:'GET',
                dataType: "json",
                data: {
                    query: request.term
                },
                success: function (data) {
                    response(data);
                },
                error: function (message) {
                    response([{'label': 'Not found!'}]);
                }
            });
        },
        minLength: 2
    });