Jquery autocomplete in codeigniter retrieving values but not displaying them

Question

After a few hours of deciphering tutorials, I finally got codeigniter and jquery autocomplete to work with each other...kind of.

Firebug is displaying the correct search terms back in JSON format, but the drop down box is not displaying any text. If there are 2 results, it displays 2 empty rows.

you can see it 'not working' here: http://rickymason.net/blurb/main/home

JS:

$(document).ready(function() {
    $(function(){
        $( "#filter" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                url: "http://rickymason.net/blurb/main/search/",
                data: { term: $("#filter").val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                    response(data);
                }
            });
        },
        minLength: 2
        });
    });
});

Controller:

    public function search()
    {
        $term = $this->input->post('term', TRUE);
        $this->thread_model->autocomplete($term);
    }

Model:

    public function autocomplete($term)
    {
        $query = $this->db->query("SELECT tag
            FROM filter_thread ft
            INNER JOIN filter f
            ON ft.filter_id = f.filter_id
            WHERE f.tag LIKE '%".$term."%'
            GROUP BY tag");
        echo json_encode($query->result_array());
    }

Hopefully its an easy fix!

Thanks

*'not working'* is not an error message from which I can glean any helpful information ... — rdlowrey, May 29 '12 at 18:22
Could you post the JSON output you get back? BTW, unless $term is properly sanitized before being passed to your model you're wide open to an SQL injection attack. — GordonM, May 29 '12 at 18:23
Please, read [this SO post](http://stackoverflow.com/questions/601300/what-is-sql-injection) and the related links. — tereško, May 29 '12 at 18:24
And yeah, as others have pointed out a better error report would be nice too. Check your javascript console, or look for a little yellow triangle in the browser status bar. — GordonM, May 29 '12 at 18:26
You should also escape the value before inserting into the query, or use the binding provided by the framework — Damien Pirsy, May 29 '12 at 18:33
@gordonm I am extremely new to coding and web development in general. Would you be able to explain this in more detail? — Ricky Mason, May 29 '12 at 19:24

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

Looking at this question on SO you need to setup your label and value fields on the response return. Try either arranging your PHP JSON output to match or map the return with something this the following (untested).

response( $.map(data, function(item){
    return {
        label: item.tag,
        value: item.tag
    };
})

edited May 23 '17 at 12:11

Community

1
1

answered May 29 '12 at 18:37

Aaron W.

8,974
2
30
44

score 1 · Accepted Answer · edited Jun 25 '12 at 01:53

Changing your code to something like this would work(I have tested in your site)

$( "#filter" ).autocomplete({
        source: function(request, response) {
            $.ajax({
            url: "http://rickymason.net/blurb/main/search/",
            data: { term: $("#filter").val()},
            dataType: "json",
            type: "POST",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.tag;
               }); 

               response(resp);
            }
        });
    },
    minLength: 2
});

Copy and paste the above code block in your firebug console and then try the autocomplete. It will work. I tried in your site and it worked.

Secondly you dont need both $(document).ready(function() { and $(function(){ at the same time as they accomplish the same thing.

Check this section of jQuery UI autocomplete

Expected data format

The data from local data, a url or a callback can come in two variants:

An Array of Strings:

[ "Choice1", "Choice2" ]

An Array of Objects with

label and value properties: [ { label: "Choice1", value: "value1" },

... ]

Reference: $.map

Jquery autocomplete in codeigniter retrieving values but not displaying them

2 Answers2

Linked