Невозможно отобразить ResultList с помощью автозаполнения. js - PullRequest
0 голосов
/ 09 апреля 2020

Я тестирую автозаполнение. 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"
  }
});

Asyn c функция для динамического получения предложений:

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;
}

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Ваша функция suggest возвращает данные внутри объекта suggestions, который необходимо выбрать, как показано ниже, а также в ссылке 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;
}
0 голосов
/ 09 апреля 2020

я думаю, что ваша ошибка в return data myabe, это возвращает ваши данные, но в вашей консоли не во вводе, но я не уверен, также я думаю, что вы должны сделать что-то подобное

autocomplete(document.getElementById("autocomplete"), data); или что-то в этом роде надеюсь, что это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...