자바스크립트로 검색창 만들기 🧐

자바스크립트로 검색창 만들기 🧐

2022-10-19 last update

20 minutes reading javascript productivity tutorial
거의 모든 단일 사이트에서 사용되기 때문에 모든 개발자는 검색 창을 만드는 방법을 알아야 합니다.

이번 포스팅에서는 검색창을 만들어 보겠습니다. fetch 메서드를 사용하는 방법을 알아보겠습니다. https://jsonplaceholder.typicode.com/users API를 사용하겠습니다.

설정 방법


index.html , styles.cssscript.js 3개의 파일을 만듭니다.
  • 이렇게 설정한 index.html 파일에서

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js" defer></script>
        <title>Javascript search bar</title>
    </head>
    <body>
        <div class="search-wrapper">
            <label for="search" >Search User</label>
            <input type="search"  id="search" data-search="">
        </div>
        <div class="user-cards"  data-user-cards-container > 
            <template data-user-template>
                <div class="card">
                    <div class="header" data-header></div>
                    <div class="body" data-body></div>
                </div>
            </template>
        </div>
    </body>
    </html>
    


  • styles.css에서 입력과 검색 결과의 스타일을 지정합니다.

  • .search-wrapper{
        display: flex;
        flex-direction: column;
        gap: .25rem;
    }
    input{
        font-size: 1rem;
        padding: .5rem;
    }
    .user-cards{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: .25rem;
        margin-top: 1rem;
    }
    .card{
        border: 1px solid black; 
        background-color: white;
        padding: .5rem;
    }
    .card .header{
        margin-bottom: .25rem;
    }
    .card > .body{
        font-size: .8rem;
        color: #777;
    }
    .hide {
        display: none;
    }
    


    정적 부분만 준비했으므로 기능 부분으로 들어가겠습니다.

    사용자 이름이나 이메일 주소를 입력할 때마다 Javascript는 입력 값과 일치하는 사용자 및 세부 정보만 반환합니다. 일치하는 값이 없으면 결과가 반환되지 않습니다.
  • script.js 파일에서
    html 쿼리에 도움이 되는 변수를 선언해 보겠습니다.

  • const userCardTemplate = document.querySelector("[data-user-template]")
    const userCardContainer = document.querySelector("[data-user-cards-container]")
    const searchInput = document.querySelector("[data-search]")
    
    


    사용자를 보유하는 변수를 선언합시다.

    const users = []
    


    가져오기 메서드를 사용하여 API에서 사용자 세부 정보를 가져오겠습니다. 이 시점에서 우리는 사용자 이름과 이메일 주소에만 관심이 있습니다.

    fetch("https://jsonplaceholder.typicode.com/users").then((res) => res.json()).then(data => {
        users = data.map(user=> {
            const card = userCardTemplate.content.cloneNode(true).children[0]
            const header = card.querySelector("[data-header]")
            const body = card.querySelector("[data-body]")
    
            // adding content into the query selected i.e header and body
            header.textContent = user.name
            body.textContent = user.email
            userCardContainer.append(card)
    
            // return the result after successfull fetch
            return {name: user.name, email: user.email, element: card}
        });
    
    })
    


    API에서 데이터를 성공적으로 가져오고 다음과 같은 브라우저에 결과를 렌더링했습니다.



    사용자가 문자를 입력할 때마다 입력과 일치하는 필드가 표시되고 해당 문자가 포함되지 않은 필드가 숨겨집니다.

    다음은 코드입니다.

    searchInput.addEventListener('input', (e) => {
        const value = e.target.value
        users.forEach((user) => {
            const isVisible = user.name.toLowerCase().includes(value) || user.email.toLowerCase().includes(value)
            user.element.classList.toggle('hide', !isVisible)
        })
    })
    


    다음은 전체script.js 파일입니다.

    const userCardTemplate = document.querySelector("[data-user-template]")
    const userCardContainer = document.querySelector("[data-user-cards-container]")
    const searchInput = document.querySelector("[data-search]")
    
    let users = []
    
    fetch("https://jsonplaceholder.typicode.com/users").then((res) => res.json()).then(data => {
        users = data.map(user=> {
            const card = userCardTemplate.content.cloneNode(true).children[0]
            const header = card.querySelector("[data-header]")
            const body = card.querySelector("[data-body]")
    
            // adding content into the query selected i.e header and body
            header.textContent = user.name
            body.textContent = user.email
            userCardContainer.append(card)
    
            // return the result after successfull fetch
            return {name: user.name, email: user.email, element: card}
        });
    
    })
    
    searchInput.addEventListener('input', (e) => {
        const value = e.target.value
        users.forEach((user) => {
            const isVisible = user.name.toLowerCase().includes(value) || user.email.toLowerCase().includes(value)
            user.element.classList.toggle('hide', !isVisible)
        })
    })
    


    요약



    검색 표시줄은 모든 소프트웨어에서 중요한 기능입니다. 그러나 사용 중인 서비스에 따라 이를 구축하는 것이 어려울 수 있습니다. 예를 들어 firebase firestore를 사용하는 것은 Algolia 및 클라우드 기능과 같은 다른 서비스를 사용해야 할 수 있는 좋은 예입니다.

    클라우드 기능을 사용하여 Firestore 및 Algolia 검색에 대한 기사를 작성하는 중입니다.

    이 기사는 원래 melbite.com/building-the-search-bar-with-javascript-🧐에 게시되었습니다.