CODEWITHSUNDEEP
phpjquerycodeigniterjquery-autocomplete
Ricky Mason
Ricky Mason

Reputation: 1828

Jquery autocomplete in codeigniter retrieving values but not displaying them

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

Upvotes: 0

Views: 11047

Answers (2)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13471

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

Upvotes: 1

Aaron W.
Aaron W.

Reputation: 9299

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
    };
})

Upvotes: 1

Related Questions