Результаты поискового блока в модале

Я пытаюсь построить некоторую функциональность поиска в модале. Когда пользователь нажимает на кнопку, открывается модальное окно с полем поиска. Затем я хочу, чтобы результаты поиска были показаны в том же модале? 

<div class="modal" id="select2modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title">Search for product to add</h6><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <h6>product Search</h6>
                <div class="card-body pb-2">
                    <form method=POST action="{% url 'searchproduct' %}">
                        {% csrf_token %}
                        <div class="input-group mb-2">
                                <input type="text" class="form-control border-right-0 pl-3" name="search" placeholder="Enter product Name" value="">
                                <span class="input-group-append">
                                <button class="btn ripple btn-primary" type="submit"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn ripple btn-primary" type="button">Add product</button>
                <button class="btn ripple btn-secondary" data-dismiss="modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

view

def search_product(request):
    searched = request.POST['searched']

    return render(request, 'index.html',{'searched':searched})
< <

Проблема в том, что это зависит от обновления страницы, которая закрывает модальное окно.

Я думаю, что лучший способ подойти к этому - использовать JavaScript и вызовы Ajax в вашем фронтенде/шаблоне и HTTP-ответы с данными JSON в вашем представлении/бэкенде. Вы не будете делать отправку формы, а вместо этого POST HTTP вызовы через Ajax в ваше представление (которое, скорее всего, будет вызвано кнопкой, которую вы уже установили). Ваше представление будет отвечать HTTP-ответом, который должен быть интерпретирован и снова включен JavaScript во фронтенде. Хороший способ структурировать ответ - использовать формат JSON, который можно легко интерпретировать с помощью JavaScript. Django Rest Framework может сделать это проще для больших проектов, но для небольших проектов может быть достаточно более или менее ручной сборки JSON-ответов.

Вернуться на верх