jQuery autocomplete and JSON response - different responses when submitting manually vs auto

Question

I am seeing strange behavior in this jQuery UI autocomplete setup.

When I begin typing say "Smith", the autocomplete offers several options in a dropdown (eg, "Joe Smith", "Mary Taylor", "Jack Sparrow"). On the console I see no errors and the response is

[{"value":"Joe Smith"},{"value":"Mary Taylor"},{"value":"Jack Sparrow"}]

But if I hit the submit/search button, then I get a blank page with:

[{"value":"Joe Smith"}]

Somehow, my Model query returns all users when running through jQuery autocomplete -- but when I trigger it manually it returns the correct result.

Any idea what's wrong here?

Thanks.

JS:

    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }

        $( "#search_input" ).autocomplete({
            source: "http://example.com/search",
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
    });

Controller (search.php, CodeIgniter markup):

function index()
{
    $term = $this->input->post('search_input');

    $response = json_encode($this->search_model->search($term));

    echo $response;
}

Model (search_model.php, CodeIgniter markup):

function search($term)
{
    $query = $this->db->query("
    SELECT up.first_name, up.last_name
        FROM user_profiles up, users u, pets p 
        WHERE u.activated = 1
          AND u.banned = 0
          AND up.last_name LIKE '%" . $term . "%'
            GROUP BY up.last_name
        ORDER BY up.last_name ASC;
        ");

    $search_data = array();

    foreach ($query->result() as $row) {

        $search_data[] = array(

            'value' => $row->first_name . ' ' . $row->last_name,
        );
    }
    return $search_data;
}

Answer 1

It looks like you are not sending over the search term. I've simplified it to one php function. $term Is going to be sent over by the autocomplete script.

$term = $_GET['term']

     function search($term)
    {
        $query = $this->db->query("
        SELECT up.first_name, up.last_name
            FROM user_profiles up, users u, pets p 
            WHERE u.activated = 1
              AND u.banned = 0
              AND up.last_name LIKE '%" . $term . "%'
                GROUP BY up.last_name
            ORDER BY up.last_name ASC;
            ");

        $search_data = array();

        foreach ($query->result() as $row) {

            $search_data[] = array(

                'value' => $row->first_name . ' ' . $row->last_name,
            );
        }
        echo json_encode($search_data);
    }

Answer 2

I think a better solution is to use jQuery .ajax() and set the function to POST data. That way I can avoid using GET and don't have to create an additional controller to handle both POST and GET .

$("#search_input").autocomplete({
    source: function(request, response) {
            $.ajax({
                url: "search",
                dataType: "json",
                type: "POST",
                data: {
                    search_input: request.term
                },
                success: function(data) {
                    //map the data into a response that will be understood by the autocomplete widget
                    response($.map(data, function(item) {
                        return {
                            label: item.value,
                            value: item.value
                        }
                    }));
                }
            });
    },
    minLength: 2,
    //when you have selected something
    select: function(event, ui) {
        //close the drop down
        this.close
    },
    //show the drop down
    open: function() {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    //close the drop down
    close: function() {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});