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 ... — user895378
– user895378, Commented May 29, 2012 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
– GordonM, Commented May 29, 2012 at 18:23
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
– GordonM, Commented May 29, 2012 at 18:26
You should also escape the value before inserting into the query, or use the binding provided by the framework — Damien Pirsy
– Damien Pirsy, Commented May 29, 2012 at 18:33

thecodeparadox · Accepted Answer · 2012-06-25 01:53:50Z

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

Community · Accepted Answer · 2017-05-23 12:11:29Z

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, 2017 at 12:11

CommunityBot

11 silver badge

answered May 29, 2012 at 18:37

Aaron W.

9,2952 gold badges36 silver badges47 bronze badges

Collectives™ on Stack Overflow

Jquery autocomplete in codeigniter retrieving values but not displaying them

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related