-지정한 위치의 문자를 추출하고 싶을 때
문자열.charAt([인덱스]) : 지정한 인덱스의 문자를 추출.
html
<body>
<label>지역명의 첫 번째 글자를 입력해주세요.
<input id="search-word-input" maxlength="1" type="text">
</label>
<div id="prefecture-list">
<!-- 각 속성에 data-*** 하면 속성에 data 값을 따로 넣어줄 수 있다. *** 에는 아무거나 넣어도 됨 -->
<button data-name="속초" data-phonetic="sokcho">속초</button>
<button data-name="부산" data-phonetic="busan">부산</button>
<button data-name="제주" data-phonetic="jeju">제주</button>
</div>
</body>지역명의 첫 번째 글자를 입력해주세요.
<!-- 각 속성에 data-*** 하면 속성에 data 값을 따로 넣어줄 수 있다. *** 에는 아무거나 넣어도 됨 -->
<button data-name="속초" data-phonetic="sokcho">속초</button>
<button data-name="부산" data-phonetic="busan">부산</button>
<button data-name="제주" data-phonetic="jeju">제주</button>
</div>CSS
.hide {
display: none;
}JavaScript
// 검색어
// 검색어 id 가져와서 변수에 저장
const searchWordText = document.querySelector('#search-word-input');
// 지역리스트
// 검색어 다 가져와서 변수에 저장.
const prefectureList = document.querySelectorAll('#prefecture-list button');
// 문자가 입력될 때마다 데이터 체크
// keyup 이벤트가 searchWordText에 입력되면 다음 함수를 실행
searchWordText.addEventListener('keyup', () => {
// 입력한 검색어 변수에 저장
const searchWord = searchWordText.value;
// 지역 리스트의 루프 처리
// element 는 각 요소에 해당.
prefectureList.forEach((element) => {
//검색어가 없으면 모든 요소를 표시
// 공백이면 hide 클래스 지우기.
if (!searchWord || searchWord === '') {
element.classList.remove('hide');
return;
}
// 데이터 name 가져오기
const prefectureName = element.dataset.name;
// 데이터 영문 name 가져오기
const phonetic = element.dataset.phonetic;
// 검색어와 첫번째 글자 일치 여부에 따라 hide 클래스 사용 결정
// hide 클래스가 사용된 요소는 화면에 표시되지 않음 .
if(
searchWord.charAt(0) === prefectureName.charAt(0) || //한글 data값 이랑 서치바에 넣은 값이랑 같은지 확인
searchWord.charAt(0) === phonetic.charAt(0) //영어 data값 이랑 서치바에 넣은 값이랑 같은지 확인
) {
// 같으면 화면에 보이게.
// 검색어의 첫번째 글자가 일치하는 경우 hide 클래스를 제거하고 화면에 보이게 하기.
element.classList.remove('hide');
} else {
// 다르면 화면에서 사라지게
// 검색어의 첫번째 글자가 일치하지 않는 경우 hide 클래스 추가하고 화면에서 사라지게 하기.
element.classList.add('hide');
}
});
});|| : or 을 뜻한다.
document.querySelectorAll : 해당 값을 모두 가져와 배열의 형태로 저장한다.
💻프론트엔드개발자