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

20029 단어 javascriptproductivitytutorial
거의 모든 단일 사이트에서 사용되기 때문에 모든 개발자는 검색 표시줄을 만드는 방법을 알아야 합니다.

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

설정 방법


index.html , styles.css 및 script.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-🧐에 게시되었습니다.
    앱 아이콘 배지 구현 방법
    SketchUp > M6 육각 볼트 치수 입력(내접원 반경) > 외접원 반경으로 입력

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage