无法使用 autoComplete.js 呈现 ResultList

Question

我正在测试 autoComplete.js 以获取建议，但我无法显示 ResultList。 这是我的简单输入字段：

<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/js/autoComplete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/css/autoComplete.min.css">

<input type="text" id="autocomplete" name="fname">

这是我的 JavaScript 代码：

const autoCompletejs = new autoComplete({
  data: {
    src: async () => suggest("party"),
    key: ["cname"],
    cache: false
  },
  trigger: {
    event: ["input"]
  },
  selector: "#autocomplete",
  resultsList: {
    render: true,
    container: source => {
      source.setAttribute("id", "company_name");
    },
    destination: document.querySelector("#autoComplete"),
    position: "afterend",
    element: "ul"
  }
});

异步 function 动态获取建议：

async function suggest(resource) {
  const query = document.querySelector("#autoComplete").value;
  var API_KEY = "6397a5215604df4cdda1109d8cdc08497d8284b2";
  const response = await fetch("https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/" + resource, {
    method: 'POST',
    headers: {
      'Authorization': "Token " + API_KEY,
      'Content-Type': "application/json"
    },
    body: "{ \"query\": \"" + query + "\" }"
  });
  const data = await response.json();            
  return data;
}

Answer 1

我认为您的错误在于return data myabe 这是在返回您的数据，但在您的控制台中而不是在您的输入中，但我也不确定我认为您必须做类似的事情

autocomplete(document.getElementById("autocomplete"), data); 或类似的东西希望它有所帮助

Answer 2

您的suggest function 返回suggestions object 中的数据，需要如下所示以及在JSFiddle链接中进行选择。

async function suggest(resource) {
  const query = document.querySelector("#autoComplete").value;
  var API_KEY = "6397a5215604df4cdda1109d8cdc08497d8284b2";
  const response = await fetch("https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/" + resource, {
    method: 'POST',
    headers: {
      'Authorization': "Token " + API_KEY,
      'Content-Type': "application/json"
    },
    body: "{ \"query\": \"" + query + "\" }"
  });
  const data = await response.json();            
  return data.suggestions;
}