Блог

Я пытаюсь выполнить какой-то поиск в реальном времени с помощью 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);
                }
            });
        });
});
 

Моя функция контроллера и функция модели:

Функция поиска контроллера

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

Функция модели

 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>
 

Я думаю, вам следует либо вернуть массив в кодировке json, либо «построить» и вернуть строку html, чтобы добавить ее туда, куда вы хотите, в случае успеха

Если вы возвращаете строку html, вы можете сделать это при успешном завершении

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

Если вы возвращаете json return json_encode($search); , вам необходимо выполнить итерацию по каждой строке и создать / добавить нужные элементы.

Вы больше не можете использовать php в html, потому что он уже запущен на сервере,

вам нужно перестроить html с помощью javascript, что-то вроде:

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