Создайте форму поиска с автозаполненными предложениями с помощью Atlas Search и Django

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

search_similar.html:

{% extends "todo/base.html" %}

{% block content %}

  <div class="recommendations">
    <!-- <div class="login-page"> -->
    <div class="form">
      <form action="{% url 'search_results' %}" method="get">
        <input name="q" type="text" placeholder="Perfume name...">
        <input id="perfumename" type ="submit" value="Find Similar Perfumes" autocomplete="nope"/>
      </form>
      <form class="login-form" action = "/predict" method="POST">
        <input type="text" placeholder="perfume name"/> <!-- https://www.youtube.com/watch?v=TRODv6UTXpM&ab_channel=ProgrammingKnowledge -->
        <input id="perfumename2" type ="submit" value="Find Similar Perfumes" autocomplete="nope"/>
      </form>
    </div>
    <script>
      $(document).ready(function() {
        $("#perfumename").autocomplete({
          source: async function(request, response){
            let data=await fetch(`http://localhost:8000/search_similar?q={request.term}`)
            .then(results => results.json())
            .then(results => results.map(result => {
              return { label: result.name, value: result.name, id:result._id };
            }
            response(data);
          },
          minLength=2,
          select: function(event, ui){
            console.log(ui.item);
          }

        })
      })
    </script>
  </div>

{% endblock %}

Даже если у меня есть autocomplete="nope", первая строка поиска все равно показывает хромированное autocomplete по умолчанию и не показывает ту, которую я встроил в MongoDB.