jQuery 自动完成和 JSON 响应 - 手动提交与自动提交时的不同响应答案

【问题标题】：jQuery autocomplete and JSON response - different responses when submitting manually vs autojQuery 自动完成和 JSON 响应 - 手动提交与自动提交时的不同响应
【发布时间】：2023-03-29 13:43:02
【问题描述】：

我在这个 jQuery UI 自动完成设置中看到了奇怪的行为。

当我开始输入“Smith”时，自动完成功能会在下拉列表中提供多个选项（例如，“Joe Smith”、“Mary Taylor”、“Jack Sparrow”）。在控制台上，我看不到任何错误，响应是

[{"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;
}

【问题讨论】：

标签： php jquery json codeigniter autocomplete

【解决方案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);
    }

【讨论】：

tahnks @jason - 你是对的，最后我在你的帮助下弄清楚了 - 当我硬提交时（点击提交按钮）我正在做 POST，所以查询有效 - - 但是当我在input 字段中进行击键时，会发送一个GET，它具有与空搜索相同的效果（返回所有结果）- CodeIgniter 只处理POST 所以需要手动使用GET正如你建议的那样传递查询词

【解决方案2】：

我认为更好的解决方案是使用jQuery .ajax() 并将函数设置为POST 数据。这样我就可以避免使用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");
    }
});

【讨论】：