단비의 코딩 공부 blog

[Vanilla JS]study 15일차 - 웹 컨텐츠 제작 - 검색 필터 본문

javascript&jquery

[Vanilla JS]study 15일차 - 웹 컨텐츠 제작 - 검색 필터

황굽달 2023. 3. 23. 10:38

검색 필터

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>Search/Filter Menu</title>
        <link rel="stylesheet" href="search.css">
    </head>
    <body>
        <div class="coffeeBox">
            <div class="leftBox">
                <h3>OSSAM Coffee</h3>
                <!-- 검색창 -->
                <input type="text" id="coffeeSearch" placeholder="커피를 검색하세요.">
                <!-- 커피리스트 -->
                <ul id="coffeeMenu">
                    <!-- data-영문 : 사용자정의 속성 -->
                    <li><a href="#" data-price="4100">아메리카노</a></li>
                    <li><a href="#" data-price="4500">카페라떼</a></li>
                    <li><a href="#" data-price="5100">바닐라라떼</a></li>
                    <li><a href="#" data-price="5100">카라멜라떼</a></li>
                    <li><a href="#" data-price="5100">카페모카</a></li>
                    <li><a href="#" data-price="6100">푸라푸치노</a></li>
                </ul>
            </div>
            <div class="rightBox">
                <h3>주문 내역</h3>
                <h4>커피 : <span id="coffeeName"></span></h4>
                <h4>가격 : <span id="coffeePrice"></span>원</h4>
            </div>
        </div>

        <script src="search.js"></script>
    </body>
</html>
*{ padding: 0; margin: 0; color: #fff; }
li{ list-style: none; }
a{ text-decoration: none; }

.coffeeBox{
    width: 500px; max-height: 350px; overflow: hidden;
    padding: 20px; box-sizing: border-box;
    background-color: #333;
}
.leftBox{
    float: left; width: 50%; max-height: 350px; overflow: hidden;
    border-right: 1px solid #ccc; box-sizing: border-box;
    padding: 10px;
}
.rightBox{
    float: left; width: 50%; max-height: 350px; overflow: hidden;
    box-sizing: border-box; padding: 10px;
}
h3{ margin-bottom: 20px; }
input{ display: block; width: 100%; height: 30px; color: #333; padding: 0 10px; margin-bottom: 10px; box-sizing: border-box; border: none; }

/* 리스트안보이게 처리 */
li{ display: none; line-height: 30px; }
//1. 문서객체선택
const input = document.getElementById('coffeeSearch');
const ul = document.getElementById('coffeeMenu');
const li = ul.getElementsByTagName('li'); //복수로 모든 li태그 선택
const coffeeName = document.getElementById('coffeeName');
const coffeePrice = document.getElementById('coffeePrice');

//2. 키보드 이벤트 - input에서 검색한 리스트가 보이게 처리
input.addEventListener('keyup', function(){
    //6개의 a태그의 글자 검색
    for(let i=0;i<li.length;i++){
        const a = li[i].firstElementChild;

        //공백이 없을때만 처리, 공백이 있을때는 모두 안보이게 처리
        if(input.value != ''){  //공백이 아닐때
            //indexOf() : 문자열 객체에 지정한 값이 처음 나타나는 인덱스 번호 반환
            //            만약 일치하는 값이 없으면 -1을 반환
            if(a.textContent.indexOf(input.value) > -1){
                li[i].style.display = 'block';
            }else{ //일치하는 값이 없다면
                li[i].style.display = 'none';
            }
        }else{  //공백일 때
            li[i].style.display = 'none';
        }
    }
});

//3. 클릭이벤트 - li태그 다 안보이게 처리, 커피명과 금액을 반환
for(let i=0; i<li.length;i++){
    const a = li[i].firstElementChild;

    a.addEventListener('click', function(){
        //dataset속성 : 태그의 사용자정의 속성값을 반환
       
        coffeeName.textContent = this.textContent;
        coffeePrice.textContent = this.dataset.price;

        li[i].style.display = 'none';

        //리스트 안보이게 처리 - 모두 안보이게 처리해야해서 반복문 작성
        for(let j=0; j<li.length;j++){
            li[j].style.display = 'none';
        }

        //입력상자의 값을 공백으로 비워두게 처리
        input.value = '';
    });
}

 

저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 17일차 - 웹 컨텐츠 제작 - 탭바  (0) 2023.03.27
[Vanilla JS]study 16일차 - 웹 컨텐츠 제작 - 메인 메뉴  (0) 2023.03.24
[Vanilla JS]study 14일차 - 웹 컨텐츠 제작 - 보드프리뷰  (0) 2023.03.22
[Vanilla JS]study 13일차 - 웹 컨텐츠 제작 - 드롭 다운 메뉴  (0) 2023.03.21
[Vanilla JS]study 12일차 - ES6 2  (0) 2023.03.16
'javascript&jquery' Related Articles more