無法使用 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;
}