[나만의 단어장] 9. 목록페이지 - 검색 기능 만들기

1. 단어장에 단어가 있으면 단어장 하이라이트
2. 없으면 사전에 있는 단어이면 상세페이지로 이동
3. 사전에 없는 단어면 ‘없는 단어’ 표시

✅ 검색을 위해 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;
}