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

[aleksey_s]

Как сделать поиск с подсказками?Autocomplete. Подсказки нужно получить по 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);
  }
}