Muscardinus

Auto Complete 본문

FrontEnd/Basic Skills

Auto Complete

Muscardinus 2022. 3. 13. 01:20
728x90

검색 Input에서 value값에 대한 자동완성 결과값을 받아오는 것을 구현

Debounce를 통한 api call 제한

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Auto Search</title>
</head>

<body>
    <div class="SearchContainer">
        <input type="text" class="SearchInput" />
        <span class="LoadingIndicator">Loading...</span>
    </div>
    <div>
        <ul class="TextList"></ul>
        <p class="InfoParagraph"></p>
    </div>
    <script type="module" src="app.js"></script>
</body>

</html>

 

const API_URL = 'https://api.thecatapi.com/v1/breeds/search';

const debounce = (targetFunction, debounceTime = 500) => {
  //가장 마지막 타이핑이 일어나고 0.5초 뒤에 API Request를 실행하도록 하는 debounce logic을 작성하시오.
  //Write Debounce logic here!
  let timeoutId = null;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(targetFunction.bind(null, ...args), debounceTime);
  }
};

const LOADING_EVENT_NAME = 'loading';
const $searchInput = document.querySelector('.SearchInput');
const $loadingIndicator = document.querySelector('.LoadingIndicator');
const $textList = document.querySelector('.TextList');
const $infoParagraph = document.querySelector('.InfoParagraph');

$searchInput.addEventListener('keyup', debounce(async (event) => {
    // Write codes here!
    const query = event.target.value;

    if (!query) return;

    $loadingIndicator.style.visibility = "visible";
    const response = await fetch(`${API_URL}?q=${query}`);
    const cats = await response.json();
    $loadingIndicator.style.visibility = "hidden";

    if (!cats.length) {
      $textList.innerHTML = "";
      $textList.style.visibility = "hidden";
      $infoParagraph.innerHTML = "해당하는 검색어가 없습니다..!";
      return;
    }

    $textList.innerHTML = cats.slice(0, 5)
                              .map((cat) => `<li>${cat.name}</li>`)
                              .join("");
    $textList.style.visibility = "visible";
    $infoParagraph.innerHTML = "";
  })
);
728x90

'FrontEnd > Basic Skills' 카테고리의 다른 글

Radio Box  (0) 2022.03.17
Dropdown Menu  (0) 2022.03.13
Search bar  (0) 2022.02.09
Scroll Top  (0) 2022.01.31
Scroll Spy  (0) 2022.01.31
'FrontEnd/Basic Skills' Related Articles more
Comments