배경
KBO 선수 퀴즈를 만들면서 검색어 추천창이 필요했다.
검색어 추천창은 검색 시 창에서 관련 검색어 리스트화하고 아래와 같은 기능들을 수행해야 한다.
특징1. 추천 리스트 클릭 가능 - 클릭 시 검색 창 반영 (DOM + function 추가)
특징2. 추천 리스트에 마우스 올리면 색 변화(CSS)
아래는 검색어 추천 창을 임시로 구현 후 사용 예시이다.
코드 구현
해당 내용을 코드로 구현한 결과는 아래와 같다.
창 구성
페이지의 구성은 검색창(id=name)과 추천창(id=suggestion_box)으로 구성된다.
해당 페이지의 html 코드는 아래와 같다.
<body>
<div class = "search_wrapper">
<div class = "mid_wrapper">
<!-- 검색창 -->
<input type="text" id = "name" autocomplete="off">
<!-- 검색버튼 -->
<input type="button" id = "submit_button" value="검색">
</div>
<!-- 추천창 -->
<div id="suggestion_box" class = "invisible">
<div id = suggested_items></div>
</div>
</div>
</body>
'검색 창'과 '버튼'을 위쪽에 두고, 아래쪽에 '추천창'을 두었으며 default를 'invisible'로 설정하였다. (검색어 입력시 해당 클래스를 지워서 추천창이 보여지도록 css에 구현하였다.)
또한 검색 창 내에는 각 검색어들을 따로 포함할 div를 따로 두었으며(id=suggested_items) 많은 추천어들이 들어갈 수 있도록 구현하였다.
다음은 css 코드이다.
.search_wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#name {
width: 200px;
height: 20px;
}
.invisible{
display: none;
}
#suggestion_box {
margin-top: 1px;
background: white;
padding: 0 10px;
border: 1px solid black;
}
#suggested_items{
height:100px;
width: 250px;
overflow: auto; /* 스크롤바 추가 */
}
/* 마우스 올리면 색 변화 */
.item:hover{
color: #fff;
background-color: lightgreen;
}특징적인 부분은 두 부분이다.
1. #suggested_items 부분에서 overflow 값을 주어 내용이 많아지면 스크롤바가 생성되게 하였다.
2. suggested_items에 들어가게 되는 item들에 대해 hover 정보를 추가하여 마우스가 올려졌을 때 해당 div의 색이 변화되도록 하였다.
함수 구현
다음은 JS 코드이다.
구현한 내용은 서버로부터 'items(추천 검색어)'를 받았다고 가정하고 작성하였다.
1. #name에 키보드 입력 시 작동 함수 : class=invisible값을 지워, 추천 창이 보이도록 한다.
2. #suggested_items 내에 기존 검색 추천 데이터가 있으면 지우고 새로 넣어준다. (DOM, div 지우고 새로 생성)
3. 서버로부터 받은 items(추천 검색어)를 순회하면서 .item div를 생성해주고(#suggested_items의 하위 div) click 시 #name(검색창)에 추천검색어를 넣어주는 eventListener를 추가해준다.
// DOM
$(function() {
$("#name").keyup(function() {
const recommendBox = document.querySelector("#suggestion_box");
// invisible을 지워준다.
recommendBox.classList.remove('invisible');
const input_name = document.getElementById("#name");
// 기존 검색 추천 데이터 지우고, 새로 넣어주기 안 그러면 계속 추가됨
recommendBox.innerHTML = "";
const suggestedItems = document.createElement('div')
suggestedItems.id = "suggested_items"
recommendBox.appendChild(suggestedItems);
// item별 리스트
var items = ['강백호', '박해민', '이정후', '원태인', '구자욱', '오승환'];
// for문 돌면서 item 추가
for (var i in items) {
var player_content = document.createTextNode(items[i]);
var suggestedItem = document.createElement('div')
suggestedItem.className = "item"
suggestedItem.addEventListener('click', function(e){
document.getElementById("name").value = this.textContent.split(' ')[0];
});
suggestedItem.appendChild(player_content);
suggestedItems.appendChild(suggestedItem);
}
})
})
최종 구현한 코드 전문은 아래와 같다.
See the Pen query _recommendation by 윤정우 (@aaxxlfde-the-typescripter) on CodePen.
'컴퓨터' 카테고리의 다른 글
| [웹] 티스토리 문단 스타일 변경 (2) | 2023.05.02 |
|---|---|
| [웹] BTS 가사 퀴즈 사이트 만들기 (0) | 2023.04.27 |
| [웹] DB 한글 초성 검색(sqlite3) (0) | 2023.04.21 |
| [웹] KBO 선수 퀴즈 사이트 만들기 (4) | 2023.04.21 |
| [ChatGPT] 프롬프트 엔지니어링이란? (0) | 2023.02.26 |
댓글