검색 드롭다운 원리 (Search Drop Down)

자바스크립트

by e7e 2023. 11. 6. 17:32

구글등의 사이트에서 검색어를 치면, 해당하는 내용이

드롭다운 식으로 나오는 걸 볼 수 있당.! (하고 시퍼진당!~ )

항상 그런 것은 아니지만 해보면 별거 없이 역시 쉽당.

예쁘게 하려면, 멋지려면 노력과 인내가 필요하 듯 CSS와의 한판이 필요하당.

그래서 여기선 대략 원리만 보는 거스로 만족해 보장!

아래 소스를 복사/붙여넣기 하고 실행해 보면 그대로 느낌이 온당!

느낌이 왔을 때 소스를 같이 보면, 느낌이 확신으로 이어진당.

searchDropSample.html

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

<head>
    <meta charset="UTF-8">
    <title>E7E 검색 드롭다운</title>
    <style>
        #wrapper {
            margin: 20px auto;
            width: 350px;
            text-align: center;
        }

        #content {
            width: 200px;
            border: 2px solid blue;
            display: none;
        }

        .sky {
            font-size: 2em;
            background-color: black;
            color: yellow;
            border-bottom: 1px solid pink;
            width: 200px;
            height: 50px;
        }

        input {
            width: 350px;
            height: 50px;
            font-size: 1.5em;
            background-color: rgb(85, 7, 133);
            color: yellowgreen;
        }

        h1 {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <h1>검색텍스트 상자 원리잉</h1>
        <h3>안수영,하상수,박미경,정종현,소경필</h3>
        <h3>김지윤,백마리,천지훈,이주영,이제훈</h3>
        <h3>서민혁,나예진,오미나,이윤,남희신</h3>
        <h3>최충수,이광일,언년이,강산군,초랭이</h3>
        <h3>금수,김선복,한모네,금라희,매튜리</h3>
        <hr><br>
        <div id="dropdown">
            <input type="text" id="schText" value="" autofocus placeholder="여기에 위 이름 검색해 보아용">
            <div id="content"></div>
        </div>
    </div>
    <script>
        // 요런 데이타가 있다고 친미당.
        // 실제는 서버(DB서버)에 이껬띠용
        const nameArr = [
            "안수영", "하상수", "박미경", "정종현", "소경필",
            "김지윤", "백마리", "천지훈", "이주영", "이제훈",
            "서민혁", "나예진", "오미나", "이윤", "남희신",
            "최충수", "이광일", "언년이", "강산군", "초랭이",
            "금수", "김선복", "한모네", "금라희", "매튜리"
        ];

        const mySchText = document.querySelector("#schText");
        const myContent = document.querySelector("#content");

        console.log(mySchText); // 디버깅

        //키보드 눌린 키가 올라왔을 때엥
        mySchText.addEventListener("keyup", function () {
            if (!this.value.trim()) {
                myContent.innerHTML = "";
                myContent.style.display = "none";
                return;
            }
            console.log("체킁:", this.value);
            myContent.innerHTML = "";
            myContent.style.display = "none";


            let schArr = [];    // 찾은 걸 담을 배열!
            for (let i = 0; i < nameArr.length; i++) {
                if (nameArr[i].includes(this.value)) {
                    schArr.push(`<div class=sky >${nameArr[i]}</div>`);
                }
            }

            if (schArr.length) { // 찾은 거이 있다면 보여주깅
                schArr.forEach((item) => {
                    myContent.innerHTML += item;
                })
                myContent.style.display = "block";
            }

            // 엔터키에 특별 처링!
            if (event.keyCode == 13) {
                if (myContent.children[0]) {
                    mySchText.value = myContent.children[0].innerHTML;
                    myContent.style.display = "none";
                }
            }
        });
    </script>
</body>

</html>

난 아래와 같은 결과를 얻었당.

멜로물은 좋아하지 않는 나를

끝까지 보게 한 멜로 드라마가 있었으닝!

바로 "사랑의 이해"당,

사랑과 이해는 별개지만 꿍짝이당.

드라마 배경이 계속 새벽 여명처럼

밝아지려는 어둑함으로 가득 차 있다.

맘에 든당.

100%는 아니지만 분명 밝아질거당.

진지하고, 의무가 부여되는 관계가 되기 전의

망설임! ! 설레임으로 가스라이팅 당한당.

스치는 인연의 무게도 결코 스치는 무게만 있지는 안타.

이래서 드라마적인 삶은 재밌나 보당.

"저 헤어질까요?"

https://www.youtube.com/watch?v=aWZuhwo3tPY

'자바스크립트' 카테고리의 다른 글

Form(폼) Serialize 속 살짝 들여다 보깅! (2)	2023.11.24
이벤트 동적 바인딩 당신만 몰라용!! (2)	2023.11.23
DHTMLX Gantt (1)	2023.11.03
GridStack 가안딴 사용법 (1)	2023.09.08
FullCalendar(풀캘린더) 어거지 사용법 (6)	2023.09.06