안녕하세요.~
이번시간에는 웹 프론트에서 Javascript를 사용해서 검색어 자동완성 기능을 만들어 보겠습니다.
이번시간에는 서버와의 통신은 이용하지 않고, 클라이언트 측에서만 구현해보도록 하겠습니다.
스틱코드 (stickode.com/mainlogin.html)
이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다.
스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고,
다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고,
좋은 코드가 쌓일수록 강력해지는 플러그인 입니다.
HTML 설정 <search_test.html>
스틱코드를 통해
HTML 코드를 설정해주도록 하겠습니다.
스틱코드를 사용하면
다음과 같이 코드가 완성됩니다.
HTML 전문입니다.
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="/css/mylog.css"> -->
<link rel="stylesheet" type="text/css" href="/stickcode/search/search_test.css">
<title>검색</title>
</head>
<body>
<!-- 검색창 -->
<div class="case">
<div class="input_wrap">
<input type="text" class="search_input" placeholder="검색어를 입력하세요.">
<img src="/stickcode/search/search.png" alt="검색" class ="case_search_btn" id="search_btn">
</div>
<div class="suggestions suggestions_pannel">
</div>
</div>
<!--js파일 호출 index.js -->
<script type="text/javascript" src="/stickcode/search/search_test.js"></script>
</body>
</html>
여기에 CSS를 입혀 보도록 하겠습니다.
CSS 설정 <search_test.css>
다시한번 스틱코드를 통해
CSS 코드를 설정해주도록 하겠습니다.
스틱코드를 사용하여
다음과 같이 코드가 완성됩니다.
CSS 전문입니다.
/* 검색창 */
.case {
padding: 32px;
}
.input_wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
border: 1px solid #f8f8f8;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 16%);
}
input {
padding: 0;
padding-left: .4em;
color: #030303;
border: 1px solid #ddd;
}
.search_input {
width: 100%;
height: 42px;
font-size: 16px;
color: #777;
line-height: 40px;
border: none;
background: none;
}
.case_search_btn {
width: 20px;
height: 20px;
margin-right: 16px;
margin-left: 16px;
}
.suggestions {
border-top: 0.5px solid;
}
.suggestions > div {
padding: 5px;
border-top: 1px solid #888;
cursor: pointer;
}
.suggestions > div:hover {
background-color: rgb(207, 204, 204);
}
다음과 같이 검색창이 만들어졌습니다.
JS 설정 <search_test.js>
처음에 사용할 엘리먼트를 선언해주겠습니다.
그리고 자동완성목록에 사용할 데이터를 선언해주겠습니다.
처음에 테스트 데이터 2개를 넣어주었습니다.
그리고 검색어 입력창 리스너를 생성하여 입력될때 마다 자동완성 목록을 갱신해보도록 하겠습니다.
스틱코드를 통해 리스너를 만들어주도록 하겠습니다.
스틱코드를 사용하여
단숨에 완성이 되었습니다.
엔터를 누르면 검색이 클릭되게 처리하였고,
javascript 내장함수를 사용하여 자동완성 리스트 데이터를 검사하였습니다.
그리고 자동완성될 목록을 div 태그로 추가주었고,
목록 중 하나를 클릭할 경우 input태그에 값이 들어가도록 설정했습니다.
다음으로는
검색버튼 클릭 처리를 해보도록 하겠습니다.
마찬가지로 스틱코드를 이용하여 설정해주겠습니다.
사용하게 되면
코드가 단숨에 생성되었습니다.
검색어 빈값은 예외처리를 해주었고,
새로운 검색어를 검색하게 되면 자동완성 목록에 추가 되어 다음에
자동완성이 되도록 설정하였습니다.
JS 전문입니다.
// 검색 인풋 태그
const search_input = document.querySelector(".search_input");
// 자동완성 목록
const suggestions_pannel = document.querySelector(".suggestions_pannel");
//검색 버튼
const search_btn = document.getElementById("search_btn");
//자동완성 데이터 초기 설정
let s_jsonArray = new Array();
let s_json1 = new Object();
let s_json2 = new Object();
s_json1.name = "테스트";
s_json1.count = 1;
s_jsonArray.push(s_json1);
s_json2.name = "테스트2";
s_json2.count = 1;
s_jsonArray.push(s_json2);
// input 태그 이벤트 리스너
search_input.addEventListener('keyup', function(){
// 엔터키 입력 처리
if (window.event.keyCode === 13) {
// Cancel the default action, if needed
// preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막습니다.
window.event.preventDefault();
// 검색어 버튼 클릭
search_btn.click();
}
// suggestions_pannel 자동완성 패널 비우기
suggestions_pannel.innerHTML='';
// 입력된 검색어 변수 input
let input = search_input.value;
// filter() 각 요소를 시험할 함수
// startsWith 메소드로 어떤 문자열이 다른 문자열로 시작하는지 확인 할 수 있습니다. 대소문자를 구분합니다.
// suggestions 에는 현재검색어(input)가 s_jsonArray리스트의 name에 포함된 경우의 값들이 리스트로 반환됩니다.
let suggestions = s_jsonArray.filter(function(exam){
// console.log(exam.name, input);
return exam.name.toLowerCase().startsWith(input);
});
// console.log('suggestions', suggestions);
// suggestions 리스트 만큼 반복하여 자동완성될 태그를 만들어줍니다.
suggestions.forEach(function(suggested){
let div = document.createElement('div');
div.innerHTML = suggested.name;
suggestions_pannel.appendChild(div);
// 클릭처리
div.onclick= () =>{
search_input.value = div.innerHTML;
suggestions_pannel.innerHTML='';
}
});
if(input == ''){
suggestions_pannel.innerHTML='';
}
})
// 검색 처리
search_btn.onclick =() => {
// 현재 검색어 : input_value
let input_value = search_input.value.trim()
if(input_value.length == 0) {
alert("검색어를 입력해주세요.")
}else {
// 현재까지 검색한 것 중 일치하는게 있는지 확인
for (i=0; i < s_jsonArray.length; i++) {
if(s_jsonArray[i].name == input_value) {
s_jsonArray[i].count += 1;
break;
}
// 마지막까지 일치하는 검색어를 찾지못하면 새로운 검색어로 추가
if (i == s_jsonArray.length -1) {
let s_json = new Object();
s_json.name = input_value;
s_json.count = 1;
s_jsonArray.push(s_json)
}
}
}
search_input.value = "";
suggestions_pannel.innerHTML='';
}
자 이제 로직은 완료되었고,
테스트를 진행해보도록 하겠습니다.
결과화면
잘동작하네요~
이렇게 스틱코드를 사용해 검색어 자동완성을 구현해보았습니다.
이 예제에서 사용된 스틱코드
출처 : stickode.com/detail.html?no=2176 - JavaScript 검색어 자동완성 만들기
감사합니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 (0) | 2021.06.26 |
|---|---|
| [JavaScript] summernote 빨리 구현하기 (0) | 2021.06.25 |
| [JavaScript] 입력 값 복사해서 다른 입력창에 값 넣어주기 (0) | 2021.06.14 |
| [JavaScript] 웹에서 음악 재생하기 (0) | 2021.06.12 |
| [JavaScript] 디지털 시계 만들기 (4) | 2021.06.02 |
