[JS] 검색 기능 구현

 

 

 

 

 

 

 

 

 

 

1. 검색창에 입력된 텍스트(searchText)를 'keyup'과 'click' 이벤트를 통해 가져온다.
2. 영문일 경우, toLowerCase()를 통해 소문자로 바꿔준다.
3. querySelectAll()로 가져온 제목(title) 요소들을 반복문을 통해 꺼내준다
4. 영문일 경우, 꺼낸 요소들의 텍스트도 소문자로 바꿔준다.
5. 문자열을 찾아서 처리해 준다.

 

 

  const get = (target) => document.querySelector(target)
  const getAll = (target) => document.querySelectorAll(target)

  const $search = get('#search')
  const $list = getAll('.contents.list figure')
  const $searchButton = get('.btn_search')

  const search = () => {
    let searchText = $search.value.toLowerCase()
    for (let i = 0; i < $list.length; i++) {
      const $target = $list[i].querySelector('strong')
      const text = $target.innerHTML.toLowerCase()
      if (-1 < text.indexOf(searchText)) {
        $list[i].style.display = 'block'
      } else {
        $list[i].style.display = 'none'
      }
    }
  }

  const init = () => {
    $search.addEventListener('keyup', search)
    $searchButton.addEventListener('click', search)
  }

 

검색창에 입력되는 즉시, 같은 텍스트의 타이틀 리스트를 불러올 수 있다.