Выпадающая кнопка поиска/фильтра просто обновляет страницу при нажатии? Как это исправить

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

Кнопка находится внутри формы. Имейте в виду, что это проект django. Вот форма с включенной кнопкой:

    <form method="post">

        <div class="dropdown">
            <button onclick="event.stopPropagation(); myFunction()" class="dropbtn">Dropdown</button>
            <div id="myDropdown" class="dropdown-content">
              <input type="text" placeholder="Search Company..." id="myInput" onkeyup="filterFunction()" value="{{company}}">
              {% for company in companies %}
                <a href="#">{{ company.name }}</a>
              {% endfor %}
            </div>
        </div>

        <input type="date" value="{{ date_applied }}">

        
        {% csrf_token %}
        <p><input type="submit" value="Add application"></p>
    </form>

Вот javascript для кнопки:

    <script>
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

        function filterFunction() {
            var input, filter, ul, li, a, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            div = document.getElementById("myDropdown");
            a = div.getElementsByTagName("a");
            for (i = 0; i < a.length; i++) {
                txtValue = a[i].textContent || a[i].innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    a[i].style.display = "";
                } else {
                    a[i].style.display = "none";
                }
            }
        }
    </script>

Я буду очень признателен за любые рекомендации.

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