Данные для автозавершения в текстовом поле

Question

Я пытаюсь сгенерировать автозавершение в поле HTML. Я только что изменил источник данных. Я смог вывести данные из массива с помощью:

$(document).ready(function() {

  var perfumes = ["dior", "pacco", "moschino"];

  $("#autocomplete").autocomplete({
    source: perfumes,
    minLength: 0
  }).focus(function() {
    /* Muestra todas las opciones al enfocar el input */
    $(this).autocomplete('search', $(this).val())
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="recommendations">
  <!-- <div class="login-page"> -->
  <div class="form">
    <form class="form" action="{% url 'similar_results' %}" method="get" autocomplete="off">
      <input id="autocomplete" type="text" placeholder="Perfume name...">
      <input id="perfumename" type="submit" value="Find Similar Perfumes" />
    </form>
  </div>
  <!-- jQuery-UI CSS -->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css" />
  <!-- jQuery-Min JS -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <!-- jQuery-UI JS -->
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</div>

Но при попытке адаптировать его к данным, которые у меня есть от запроса к индексу базы данных MongoDB, все не так просто. В самом деле, это:

  $(document).ready(function () {
    $("#autocomplete").autocomplete({
        source: async function(request, response) {
            let data = await fetch(`http://localhost:8000/similar/similar_results/?query=${request.term}`)
                .then(results => results.json())
                .then(results => results.map(result => {
                    return { label: result.name, value: result.name, id: result._id };
                }));
            response(data);
        }
    });
  });

Ничего не делает. Даже если http://localhost:8000/similar/similar_results/?query=${request.term} возвращает ожидаемые документы.

БЛОГ НА HUSL

Данные для автозавершения в текстовом поле

Ответы (0 шт):