Django - самый питонический способ добавить HTML в шаблон из вызова AJAX

Question

У меня есть веб-приложение, в котором пользователь может искать список камер, и поиск вернет камеры в таблице HTML.Это функция, которую я пытаюсь добавить:

1. Пользователь попадает на домашнюю страницу barebones без единой панели поиска (например, google).
2. При каждом нажатии клавиши, которую пользователь нажимает вВ строке поиска JQuery должен отправить запрос AJAX GET на сервер с поисковым термином, а результаты поиска должны быть показаны в таблице под панелью поиска.
3. Если поиск возвращает список камергде все они имеют одинаковое значение для атрибута, должна появиться кнопка.
4. Пользователь должен видеть одинаковые результаты, если он нажимает клавишу ввода или полагается только на нажатия клавиш.

Здесьэто мой текущий код, который используется при нажатии клавиши ввода.

<!-- siren_search.html -->

<div class="row">
        <div class="col-sm-8 col-md-7 col-xl-5 mx-auto">
            <form id="searchform" action="{% url 'siren_search' %}" method="GET">
                <input id="searchbar" name="query" autocomplete="off" onkeyup=getCameras(this.value) placeholder="Search for the name of a jobsite."
                    class="form-control" type="search" />
            </form>
        </div>
    </div>

    <div class="row">
        <div id="results-section" class="col-sm-8 col-md-7 col-xl-5 mx-auto">

            {% if cameras.count > 0 %}
            <button id="trigger-all-btn" type="button" class="btn btn-lg btn-block btn-outline-danger btn-space js-trigger-all-sirens-btn">Trigger
                all sirens</button>

            <table id="camera-table" class="table table-hover">

                <thead>
                    <tr class="header">
                        <th scope="col" style="width:33%;">Asset Name</th>
                        <th scope="col" style="width:33%;">Job Site</th>
                        <th scope="col" style="width:33%;"></th>
                    </tr>
                </thead>

                <tbody>
                    {% for camera in cameras %}
                    <tr>
                        <td>{{ camera.asset_name }}</td>
                        <td>{{ camera.site.name }}</td>
                        <td><button type="button" id="{{ camera.asset_name }}-siren-btn" class="btn btn-outline-danger float-right js-single-trigger-btn">Siren</button></td>
                    </tr>
                    {% endfor %}
                </tbody>

            </table>

            {% else %}
            {% endif %}
        </div>
    </div>

# views.py

def siren_search(request):

    context = {}

    if request.is_ajax():
        term = request.GET.get('query')

        if term:
            try:
                jobsite = JobSite.objects.get(name__icontains = term)
                cameras = jobsite.camerasystem_set.all()
                context = {
                    'cameras': cameras,
                }
            except ObjectDoesNotExist:
                return JsonResponse({'success': False}, 400)

        return JsonResponse({'context': context}, 200)

    else:
        term = request.GET.get('query')

        if term:
            try:
                jobsite = JobSite.objects.get(name__iexact = term)
                cameras = jobsite.camerasystem_set.all()
                context = {
                    'cameras': cameras,
                }

            except ObjectDoesNotExist:
                pass

    return render(request, 'siren_search.html', context)

// search.js

function getCameras(query) {
  $.get('?query=' + query, query, searchSuccess(query))
}

function searchSuccess(response) {
  console.log(response)
  // Display table results HTML. Do I do this from here in Javascript or read 
  // from a template file like ajax_search.html?
}

Вот как он должен выглядеть на главном экране:

Так должно выглядеть при каждом нажатии клавиши, постоянно обновляя таблицу, а кнопка «Запускать все сирены» должна отображаться только в том случае, если jobsite одинаково для всех камер.

Мой вопрос:

Какой самый питонный способ добавить HTML-таблицу AJAX без конфликтас таблицей HTML, когда они нажимают ввод?Вернуть ли я JsonResponse() из views.py и создать таблицу в Javascript?Вернуть ли мне файл ajax_template.html и добавить ли javascript HTML в тело siren_search.html?