자바스크립트에서 JSON 데이터를 이용하여 검색 기능 생성하기

15 Sep 2023

javascript

이번에는 자바스크립트와 JSON 데이터를 활용하여 검색 기능을 만들어보겠습니다. 검색 기능은 웹 애플리케이션에서 매우 중요한 기능 중 하나이며, 사용자가 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다.

JSON 데이터 구조

검색 기능을 만들기 위해 우선 JSON 데이터 구조를 정의해야 합니다. 예를 들어, 상품 정보를 담은 JSON 데이터가 있다고 가정해보겠습니다.

const products = [
  { id: 1, name: "아이폰 12", price: 1299000 },
  { id: 2, name: "갤럭시 S21", price: 1199000 },
  { id: 3, name: "맥북 프로", price: 2199000 },
  // 추가적인 상품 데이터...
];

위의 예제에서 각 상품은 id, name, price 등의 속성을 가지고 있습니다. 이러한 형태로 JSON 데이터를 구성하면 간편하게 검색 기능을 구현할 수 있습니다.

검색 기능 구현하기

이제 검색 기능을 구현해보겠습니다. 사용자가 특정 키워드를 입력하면, 해당 키워드가 이름에 포함된 상품들을 검색하여 결과를 보여줄 것입니다.

function searchProduct(keyword) {
  const filteredProducts = products.filter(product => {
    return product.name.toLowerCase().includes(keyword.toLowerCase());
  });

  if (filteredProducts.length > 0) {
    console.log("검색 결과:");
    filteredProducts.forEach(product => {
      console.log(`${product.name} - 가격: ${product.price}`);
    });
  } else {
    console.log("일치하는 검색 결과가 없습니다.");
  }
}

// 검색 테스트
searchProduct("아이폰");

위의 코드에서 searchProduct 함수는 입력받은 키워드를 이용하여 products 배열에서 해당 키워드를 포함한 상품들을 필터링합니다. 필터링 결과가 있다면 결과를 출력하고, 없다면 “일치하는 검색 결과가 없습니다.”라고 출력합니다.

HTML과 연동하기

위에서 구현한 검색 기능을 HTML과 연동하여 웹 페이지에 표시할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>상품 검색</title>
  <script>
    // 자바스크립트 코드
    // ...

    function handleSubmit(event) {
      event.preventDefault(); // 폼 제출 기본 동작 막기
      
      const keyword = document.getElementById("keyword").value;
      searchProduct(keyword);
    }
  </script>
</head>
<body>
  <h1>상품 검색</h1>
  <form onsubmit="handleSubmit(event)">
    <input type="text" id="keyword" placeholder="상품 이름을 입력하세요">
    <button type="submit">검색</button>
  </form>
</body>
</html>

위의 코드에서는 HTML <form> 요소와 <input> 요소를 사용하여 검색어를 입력 받고, 검색 버튼을 클릭하면 handleSubmit 함수가 호출되어 검색을 수행합니다.

이렇게 자바스크립트와 JSON 데이터를 활용하여 검색 기능을 만들 수 있습니다. 이는 웹 애플리케이션 개발에서 자주 사용되는 기능 중 하나이므로, 유용하게 활용할 수 있습니다.

#javascript #JSON #검색