Как создать динамическую форму в htmx и Django?

Я создаю форму, которая посылает запрос обратно на Django методом POST, используя htmx для получения результатов поиска без необходимости перезагрузки страницы. Я уже пытался создать форму с помощью Django и htmx, но безуспешно. Htmx Будучи новичком, я не могу найти надежных источников для обучения. Каждый раз, когда я отправляю свою форму, страница перезагружается, несмотря на меня. Вот мой исходный код:

<form method="POST" action="search">
                        ...
                        <input  type="search" name="search"  hx-post="/search" hx-target="#results"  hx-trigger="keyup changed delay:500ms"   value="{{form.search.value}}" placeholder="Search here..."  autofocus x-webkit-speech/>
                       
                </form>

Когда пользователь отправляет форму, введенные ключевые слова отправляются в файл Django views.py через метод POST, который отвечает за возврат результатов.

Строго говоря, если вы хотите полагаться на htmx и keyup, вам не нужно окружать вводимые данные тегом формы. Это может решить вашу насущную проблему.

Если, однако, вы также хотите включить форму с кнопкой (неплохая идея для обеспечения доступности, чтобы форма работала без javascript), вы можете попробовать добавить

hx-sync="closest form:abort"

к вашему элементу ввода, который должен перекрывать запросы на отправку формы, пока htmx делает свое дело.

Единственное, что выглядит странно, это то, что действие формы и атрибуты hx-post настолько похожи. Убедитесь, что ваш ответ передает HTML только для #results, а не для всей страницы.

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