简体   繁体   English

无法使用 autoComplete.js 呈现 ResultList

[英]Cannot render ResultList using autoComplete.js

I'm testing autoComplete.js to get suggestions, but I cannot make ResultList to be shown.我正在测试 autoComplete.js 以获取建议,但我无法显示 ResultList。 This is my simple input field:这是我的简单输入字段:

<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">

And this is my JavaScript code:这是我的 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"
  }
});

Async function to get suggestions dynamically:异步 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;
}

i think you bug is at return data myabe this is returning your data but in your console not in your input but i'm not sure also i think you have to do something like that我认为您的错误在于return data myabe 这是在返回您的数据,但在您的控制台中而不是在您的输入中,但我也不确定我认为您必须做类似的事情

autocomplete(document.getElementById("autocomplete"), data); or something like that hope it helps或类似的东西希望它有所帮助

Your suggest function returns the data inside of suggestions object which needs to be selected as shown below and in the JSFiddle link as well.您的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;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM