javascript - 使用 Atlas Search 和 Django 构建自动完成表单元素

Question

我想在 Django webapp 中构建一个自动完成表单。我已经能够在搜索栏上查询我的 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 = "similar_results/" method="POST">
        <input type="text" placeholder="perfume name"/> <!-- https://www.youtube.com/watch?v=TRODv6UTXpM&ab_channel=ProgrammingKnowledge -->
        {% csrf_token %}
        <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);
          }

        })
      }),
      $(document).ready(function() {
        $("#perfumename2").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"第一个搜索栏，仍然会显示默认的 chrome 自动完成功能，并且不会显示我在 MongoDB 中构建的搜索栏。第二个没有显示任何内容，即使我将 id 链接到脚本也是如此。

标签： javascriptdjangomongodbautocomplete