Self Code Review/(sparta) WEB plus - 나만의 단어장
[나만의 단어장] 9. 목록페이지 - 검색 기능 만들기
밍굥잉
2022. 5. 4. 14:30
- 단어장에 단어가 있으면 단어장 하이라이트
- 없으면 사전에 있는 단어이면 상세페이지로 이동
- 사전에 없는 단어면 ‘없는 단어’ 표시
✅ 검색을 위해 word 키 값만 모여있는 word_list 만들기
let words = {{ words|tojson }}; //'이 부분은 Html 코드가 아니고 진짜 데이터'라고 말해주기 위해 tojson을 사용
let word_list = []; //딕셔너리에서 단어들만 모으기 위한 list 생성
for (let i = 0; i < words.length; i++) { //words의 길이보다 짧은 동안 반복
word_list.push(words[i]["word"]) //words의 i번째의 word 키 값을 word_list 안에 하나씩 넣음
}
- tojson 전
- tojson 후
- console 창 출력 결과
✅ 검색 기능 구현
function find_word() {
let word = $("#input-word").val().toLowerCase(); //input-word의 값을 소문자로만 받아서 word에 저장
if (word == "") { //아무 것도 입력하지 않고 검색하여 word가 비었으면
alert("please write something first :)") //alert 띄우기
return
}
if (word_list.includes(word)) { //word_list에 포함되어 있으면
$(`#word-${word}`).addClass('highlight').siblings().removeClass('highlight'); //하이라이트 기능을 하이라이트 클래스로 추가
$(`#word-${word}`).siblings().removeClass("hightlight") //(`#word-${word}`) 값 id의 형제들을 찾아서 하이라이트 클래스를 없앰.
$(`#word-${word}`)[0].scrollIntoView(); //스크롤이 길어졌을 때, word에 맞는 첫번 째 요소를 찾아서 스크롤 하는 기능 추가
} else { //없으면
window.location.href = `/detail/${word}?status_give=new` //새 단어를 위한 상세페이지로 이동.
}
}
✅ 하이라이트 스타일
/* 하이라이트 클래스를 갖는 tr 안의 td에 배경색, 글자색 적용 */
tr.highlight > td {
background-color: #e8344e;
color: white;
}
/* (td 적용 스타일에서 a 태그에 먼저 적용된 스타일이 있어서 적용 안된) a 태그는 따로 글자색 적용 */
tr.highlight >td > a {
color: white;
}