Автозаполнение jQuery и ответ JSON - разные ответы при отправке вручную и авто

Question

Я вижу странное поведение в этой установке автозаполнения пользовательского интерфейса jQuery.

Когда я начинаю печатать «Смит», автозаполнение предлагает несколько вариантов в раскрывающемся списке (например, «Джо Смит», «Мэри Тейлор», «Джек Воробей»). На консоли я не вижу ошибок и ответ

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

Но если я нажму кнопку отправки / поиска, то получу пустую страницу с:

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

Почему-то мой запрос модели возвращает всех пользователей при запуске через автозаполнение jQuery, но когда я запускаю его вручную, он возвращает правильный результат.

Есть идеи, что здесь не так?

Спасибо.

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

Контроллер (search.php, разметка CodeIgniter):

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

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

    echo $response;
}

Модель (search_model.php, разметка CodeIgniter):

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

Похоже, вы не отправляете поисковый запрос.Я упростил это до одной функции PHP.$ term Будет отправлен сценарием автозаполнения.

$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

Я думаю, что лучшим решением будет использование jQuery .ajax() и установка функции на POST data. Таким образом, я могу избежать использования GET и не создавать дополнительный контроллер для обработки POST и 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");
    }
});