Как сделать поиск с подсказками Autocomplete?

Question

[Alekcey_s]

Подсказки нужно получить по brand_name, article, name. Данные получаю по API.

<form id="search__btn">
            <input type="text" class="header-search__search-input" id="mysearch" placeholder="Введите артикул" autocomplete="off" name="term" value="">
          
            <button class="header-search__search-submit-btn" type="submit">Очистить поиск</button>
          </form>

async function fetchJSONAsync(url, init) {
  let response = await fetch(url, init);
  if (response.ok) {
      let json = await response.json();
      return json;
  }
  else
      throw new Error(`${response.status}: ${response.statusText}`);
}
 document.querySelector(".header-search__search-submit-btn").onclick = btn_click;
 
async function btn_click() {
 
  try {
      let url = new URL("https://api2.autotrade.su?json");
      let obj = {
          auth_key: "1234",
          method: "getItemsByQuery",
          "params": {
          "q": $("#mysearch").val(),
          "with_stocks_and_prices": 1,
          "cross": 1,
          "strict": 1,
          "component": 1,
          "with_delivery":1,
          "related": 0,
          "storages": [89102]
            
  }
}
 
      let json = JSON.stringify(obj);
      
      url.searchParams.append("data", json);
      let data = await fetchJSONAsync(url);
      let s = "";
     
      let list = document.querySelector(".my__content");
      for (key in data.items) {
        
        s += `<div class="content__api">
        <img class= "autotrade__photo-1 " id='ex1' src=${data.items[key].photo}>
        <div class="name__brand">
        ${data.items[key].name}</div>
        <div class= "brand_name">Бренд:<br><br>${data.items[key].brand_name}</div>
        <div class="treds">Номер:<br><br> ${data.items[key].article}</div>
        <div class="content__api__price">${data.items[key].name}</div>
        
        </div></div></div>`
       
       console.log(data.items[key]);
       list.innerHTML = s;
      }
  } catch (error) {
      console.log(error.message);
  }
}

Answer 1

[Антон Шаманов]

конструкция try/catch неверно записана - установи js linter чтобы найти синтаксические ошибки в коде

Comments

[Alekcey_s]

Подскажите где синтаксические ошибки. Я только учусь писать скрипты и много чего ещё не понимаю

[Alekcey_s]

онлайн валидаторы ошибок не находят

[Alekcey_s]

Александр, вставил код в JSFiddle и не подсвечивает красным.

[Антон Шаманов]

Alekcey_s, с кодом все ок, из-за кривого форматирования кода ошибся.
1. ты не дожидаешься выполнения запроса должно как-то так:

async function foo() {
  return 1;
}
foo().then(...);

подробнее
2. проверь запрос возвращает результат?
3. используй jquery везде или не используй вообще, а то огрызок $("#mysearch").val() выглядит по меньшей мере странно - почему не document.querySelector("#mysearch").value ?

[Alekcey_s]

Антон Шаманов, запрос результат в консоль возвращает. поисковый запрос на страницу выводиться. jquery убрал как вы и советовали. Спасибо!!! Я только учусь ещё поэтому не все понимаю. Куда поставить
async function foo() {
return 1;
}
foo().then(...);

[Антон Шаманов]

Alekcey_s, это просто пример работы с асинхронными функциями, смотри руководство если не понятен пример