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

Answer 1

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