Как сделать поиск ajax?

Question

[Andre548]

Всем привет, помогите разобрать, делаю поиск, отправляю данные на из поля поиск на сервер, на сервере их обновляю и передаю обратно, и вот хоть тресни, не пойму как обновить информацию без перезагрузки

<div class="search-container">
                                    <input id="search" class="form-control" type="text" @if ( request()->has('search') && request('search') != '' ) value="{{request('search')}}" @endif placeholder="Введите наименование...">
                                    <button class="fa fa-search" id="search-icon"></button>
                                </div>

$(document).ready(function() {
        $('#search-icon').click(function() {
            var searchTerm = $('#search').val();
            $.ajax({
                url: '{{URL::to('/')}}/alerts', // Укажите путь к вашему контроллеру
                type: 'GET',
                data: {
                    search: searchTerm,
                    _token: $('input[name=_token]').val()
                },
                success: function(response) {
                   
                }
            });
        });
    });

public function indexAlerts()
    {
        $query = Alert::where('id', '>', 0)
            ->where('user_id', 0)
            ->whereNotIn('type', ['5', '6'])
            ->orderBy('visited', 'asc')
            ->orderBy('created_at', 'desc');

        if (request()->has('search')) {
            $query->where('info', 'like', '%' . request('search') . '%');
        }

        $alerts = $query->paginate(10);

        return view('alerts.index', ['title' => 'Уведомления'])
            ->with('alerts', $alerts);
    }

Answer 1

[Rsa97]

Изучайте, что такое DOM и с чем его едят.

Comments

[Andre548]

Это само собой, но вопрос сейчас встал)

[Ivan1331]

Andre548, ну так вам верно ответили, если вы возвращаете только данные(а это ещё стоит проверить, возвращается ли вам что то, как минимум попробуйте вывести response в консоль), то рисуйте эти данные через ДОМ апи. Условно в success пишете что то подобное

var $wrapper = $('#wrapper');

            // Предположим, что данные возвращаются в виде массива объектов
            data.forEach(function(item) {
                var $itemDiv = $('<div></div>');
                $itemDiv.append('<p>ID: ' + item.id + '</p>');
                $itemDiv.append('<p>Имя: ' + item.name + '</p>');
                $itemDiv.append('<p>Номер: ' + item.number + '</p>');

                $wrapper.append($itemDiv);
            });

Answer 2

[Дмитрий Кузнецов]

Внутрь success вы должны добавить логику на добавления/обновление/удаления и т.п (нужное подчеркнуть), которое пришло с бэкенда.

И вообще для ajax запросов нужно использовать api запросы (routes/api.php). И в контроллере вы отдаёте только данные, а не как сейчас у вас - "шаблон" с данными.