결과물
사용 에디터
Atom Editor
요구사항
1. 키를 입력할 때마다 검색 결과가 동적으로 변하기
HTML
<body>
<div class="searchbox">
<div class="header">
<h1>Search</h1>
<input onkeyup="filter()" type="text" id="value" placeholder="Type to Search">
</div>
<div class="container">
<div class="item">
<span class="icon">A</span>
<span class="name">Apple</span>
</div>
<div class="item">
<span class="icon">O</span>
<span class="name">Orange</span>
</div>
<div class="item">
<span class="icon">M</span>
<span class="name">Mandarin</span>
</div>
<div class="item">
<span class="icon">S</span>
<span class="name">Strawberry</span>
</div>
<div class="item">
<span class="icon">W</span>
<span class="name">Watermelon</span>
</div>
<div class="item">
<span class="icon">G</span>
<span class="name">Grape</span>
</div>
<div class="item">
<span class="icon">P</span>
<span class="name">Pear</span>
</div>
<div class="item">
<span class="icon">C</span>
<span class="name">Cherry</span>
</div>
</div>
</div>
</body>CSS
body{
margin: 0;
padding: 0;
font-family: "Montserrat";
}
.searchbox{
width: 90%;
margin: 10px auto;
}
.header{
background: #ECDFBF;
overflow: hidden;
padding: 20px;
text-align: center;
}
.header h1{
text-transform: uppercase;
color: white;
margin: 0;
margin-bottom: 8px;
}
#value{
border: none;
background: #E0D3B6;
padding: 6px;
font-size: 18px;
width: 80%;
border-radius: 6px;
color: white;
}
#value:focus{
outline: none;
}
.container{
background: #FFFFF5;
padding: 1%;
}
.item{
margin: 3% 0px;
display: flex;
align-items: center;
}
.icon{
width: 25px;
height: 25px;
background: #E0D3B6;
color: white;
font-size: 15px;
text-align: center;
line-height: 25px;
border-radius: 50%;
margin-right: 8px;
}
.name{
font-size: 17px;
font-weight: 470;
color: #333;
}
SCRIPT
1. 키를 입력할 때마다 검색 결과가 동적으로 변화하기
- input 태그에 onkeyup을 사용해 키를 누를때마다 filter()라는 함수를 실행시키기
- 대소문자를 구분하지 않고 가져오기 위해 검색한 값을 toUpperCase()로 모두 대문자로 변환해 변수에 담기
- 목록에 있는 모든 아이템을 getElementsByClassName으로 가져오기
- 목록을 for문으로 돌려 i번째 아이템의 자식 요소인 name의 값을 가져온다.
- 비교를 위해 name의 값도 대문자로 바꿔준 후 .indexOf()로 검색한 값이 있는지 없는지 확인하기. 값이 없을 경우 -1로 반환
- 값이 -1이 아닐경우 item[i].style.display를 flex로 바꿔 시각화 아닐 경우 none로 설정해 검색 목록에 띄우지 않기
<script type="text/javascript">
function filter(){
var value, name, item, i;
value = document.getElementById("value").value.toUpperCase();
item = document.getElementsByClassName("item");
for(i=0;i<item.length;i++){
name = item[i].getElementsByClassName("name");
if(name[0].innerHTML.toUpperCase().indexOf(value) > -1){
item[i].style.display = "flex";
}else{
item[i].style.display = "none";
}
}
}
</script>배운점
String.indexOf(value)
- 문자열 내에서 특정한 문자열의 index 값을 리턴한다
- 찾는 문자열이 없을 경우 -1을 리턴한다
출처 : https://thisisspear.tistory.com/40?category=823576
[JavaScript] 검색 기능 만들기
결과물 사용 에디터 Atom Editor 요구사항 1. 키를 입력할 때마다 검색 결과가 동적으로 변하기 HTML Search A Apple O Orange M Mandarin S Strawberry W Watermelon G Grape P Pear C Cherry CSS body{ margin: 0; padding: 0; font-family
thisisspear.tistory.com
'Front-End > JavaScript' 카테고리의 다른 글
| [JQuery] li 태그의 data 속성을 이용해서 정렬하는 방법(jquery sort() 함수 사용) (0) | 2023.02.10 |
|---|---|
| [JavaScript] datepicker 달력 생성하고 제어하기(단일달력, 연결된 달력) (0) | 2023.02.10 |
| [JavaScript] 변수의 선언 방식(var, const, let) (0) | 2023.02.10 |
| [JavaScript]자바스크립트로 텍스트 하이라이트 처리 (검색) (0) | 2023.02.09 |