[JS]아랍어 단어장 페이지 구현하기 - 4. 검색 기능 고도화(1)

CHO WanGi·2023년 5월 16일

Javascript

목록 보기

7/20

아랍어 단어장 페이지- Al Klimat

Goal

1.검색 기능 고도화

예를 들어 뜻이 내일 처럼 딱 한단어면 검색이 가능한데, 방향,방면 을 찾기 위해 방향 만 검색시 단어가 나오지 않는 현상이 발생한다
검색 전에 전체 단어를 보여주고, 검색시 딱 그단어만 나오도록 수정이 필요하다

2.KR/AR 버튼을 만들어서 한글 검색과 아랍어 검색 둘다 지원하는 것이 필요하다

3.검색 기록을 보여주는 기능 도입

1.검색 기능 고도화

구현하고자 하는 것은 단어 한글 뜻의 일부만 일치해도 보여주는 것이다.

참고링크

💡indexOf() 메소드 사용

// 🚨 기존
 inputEl.addEventListener("change",()=> {
      DATA
        .filter(data => data.mean === inputEl.value)
        .map(function(element){
          resultEl.innerHTML = /* html */`
          ${element.single} : ${element.mean}
          `
        })

// 💡 변경 후
 inputEl.addEventListener('input', () => {
      DATA.map(item => {
        if(item.mean.indexOf(inputEl.value) !== -1){
            resultEl.innerHTML = `
            ${item.single} - ${item.plural} : ${item.mean}
            `
        }
      })
    })

기존 코드는 input.value와 한글뜻(data.mean)이 토씨하나 안틀리고 정확하게 일치해야 결과를 표출했기 때문에, 방향,방면 같은 경우 방향만 검색시
표출되지 않았다.

indexOf()를 이용한 코드는 data.mean 중, input.value에 들어오는 문자를 포함하는 요소의 인덱스를 반환하는 메소드 이다.
따라서 방향,방면 중 방향만 검색해도 방향,방면에 해당하는 단어와 뜻을 사용자에게 보여줄 수 있다.

(그리고 indexOf() 는 대/소문자 구분을 하지만 한글과 아랍어에는 대소문자가 없다... ^^)

2.한-아 / 아-한 검색 지원

// 언어선택 버튼 - KR을 기본값으로 두고, class 에 "AR"이 추가되면 버튼의 내용이 AR 로 바뀌도록함
    langSelectBtnEl.addEventListener('click', () => {
      if (langSelectBtnEl.classList)
      // toggle 을 사용하여 자유로운 전환이 가능하도록 함
        langSelectBtnEl.classList.toggle('AR')
      langSelectBtnEl.innerHTML = (langSelectBtnEl.classList == "AR") ? `AR` : `KR`
    })

    inputEl.addEventListener('input', () => {
      DATA.map(item => {
        // 만약 class에 "AR"이 활성화된 상태라면
        if (langSelectBtnEl.classList == "AR") {
          // 이때는 input value 와 일치하는 아랍어 단어를 찾도록 함
          // 단수와 복수, 현재와 미완료형과 일치하는 모든 단어를 찾을 수 있도록 OR 연산자를 사용함
          if (item.single.indexOf(inputEl.value) !== -1 || item.plural.indexOf(inputEl.value) !== -1) {
            resultEl.innerHTML = `
            ${item.single} - ${item.plural} : ${item.mean}
            `}
        }
        // AR 이 없는 경우 = KR
        if (item.mean.indexOf(inputEl.value) !== -1) {
          resultEl.innerHTML = `
            ${item.single} - ${item.plural} : ${item.mean}
            `
        }
      })
    })