在键入 AJAX 和 PHP 时显示搜索结果

Question

我正在尝试使用 ajax 进行某种实时搜索，以在输入搜索栏时显示用户列表。 我正在努力返回数据并将其显示在我的视图中。

到目前为止我已经尝试过：

我的 JQuery 脚本：

$(document).ready(function (){
        const base_url = '<?php echo base_url();?>';
        $("#search_user").keyup(function (e){
            e.preventDefault();
            const val = $(this).value;
            $.ajax({
                type: "POST",
                url: base_url + "/public/Friendcontroller/search", // the method we are calling
                data: {search:val},
                dataType: "json",
                success: function (result) {
                    response(result);
                    console.log("Success",result);
                },
                error: function (result) {
                    console.error("unsuccessful",result);
                }
            });
        });
});

我的 controller function 和 model ZC1C425268E68385D1AB5074C17A9：

Controller 搜索 function

public function search(): array
    {
       return $this->friend_model->liveSearch($_POST['search']);
    }

Model function

public function liveSearch($val) {
        $search = array();
        $result = $val;

        $getUser = "SELECT * FROM users WHERE userName LIKE '%$result%' OR firstName LIKE '%$result%'
                        OR lastName LIKE '%$result%'";

        $query = $this->db->query($getUser);

        foreach ($query->getResult() as $row) {
            $userID = $row->userID;
            $firstName = $row->firstName;
            $lastName = $row->lastName;
            $userName = $row->userName;
            $avatar = $row->avatarUrl;
            array_push($search, array('userID' => $userID, 'firstName' => $firstName,
                'lastName' => $lastName, 'userName' => $userName, 'avatarUrl' => $avatar));
        }
        return $search;
    }

我要在其中呈现结果的 HTML ：

<div style="height: 32px"></div>
    <?php foreach (//Result from AJAX call here): ?>
        <div class="tabs-stage">
            <div class="container">
                <div class="person">
                    <div class="personHead">
                        <div class="profile">
                            <img id="avatar" class="head3" src="<?=base_url()?>/public/uploads/avatars/<?=$result['avatarUrl']?>">
                        </div>
                        <div class="personName">
                            <h2><?= $result['userName'] ?></h2>
                            <h4><?= $result['firstName'] . " " . $result['lastName'] ?></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

我认为您应该返回编码的数组 json 或“构建”并将 html 字符串返回到 append 任何您想要成功的地方

如果您返回 html 字符串，那么您可以在成功时执行此操作

success: function (result) {
                $("your div").html(result);
                console.log("Success",result);
            }

如果你返回 json return json_encode($search); 那么您必须遍历每一行并创建/附加您想要的元素。

Answer 2

你不能再在 html 中使用 php 因为它已经在服务器端运行了，

您必须使用 javascript 重建 html，例如：

success: function (result) {
    var $container = $('#resultContainer');
    $.each(result,function(i,res){
        $container.append('<div class="person"><h2>'+res.userName+'</h2></div>');
    });
},