Как условно отобразить/скрыть одну из двух форм с живым поиском в Django?

У меня есть две формы:

from django import forms
from .models import Entity, Quote

class EntityForm(forms.ModelForm):
    class Meta:
        model = Entity
        fields = ['name', 'website', 'contact']

class QuoteForm(forms.ModelForm):
    class Meta:
        model = Quote
        fields = ['entity', 'text', 'notes']

Изначально при загрузке страницы отображается только поле сущности name вместе со всей формой котировки. Поля website и contact не должны отображаться.

Пользователь заполняет поле сущности name. Мы выполняем живой поиск, чтобы получить все значения в модели entity, которые похожи, чтобы помочь им заполнить форму. Если по введенному ими тексту не получено никаких результатов, то теперь должны быть отображены поля website и contact.

Функциональность живого поиска довольно проста в реализации, однако я испытываю трудности с функцией скрытия/открытия и мог бы воспользоваться некоторой помощью.

Страница изначально загружает текст цитаты, и я не уверен, почему. Аналогично, когда я заполняю поле entity известными мне строками, которых нет в базе данных, не происходит переключения скрыть/открыть

<form>
  <label for="entity-name">Entity Name:</label>
  <input type="text" id="entity-name" name="entity-name" onkeyup="searchEntities()">
  <div id="search_results"></div>
</form>

<form id="quote-form">
  <div class="form-group">
    <label for="quote-text">Quote Text:</label>
    <textarea class="form-control" id="quote-text" name="quote-text" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

  <script>
    function searchEntities() {
      const entityName = document.querySelector('#entity-name').value;
      fetch(`/search-entities/?entity_name=${entityName}`)
        .then(response => response.json())
        .then(entities => {
          const searchResults = document.querySelector('#search_results');
          searchResults.innerHTML = '';
          entities.forEach(entity => {
            const p = document.createElement('p');
            p.innerHTML = entity.name;
            searchResults.appendChild(p);
          });
        });
    }

    const entityNameField = document.getElementById("entity-name");
    const quoteTextField = document.getElementById("quote-text");

    entityNameField.addEventListener("blur", async function() {
        const entityName = entityNameField.value;
        const response = await fetch(`/api/entities/?entity_name=${entityName}`);
        const entities = await response.json();

        if (entities.length === 0) {
            quoteTextField.style.display = "none";
        } else {
            quoteTextField.style.display = "block";
        }
});

</script>

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