/subway_search_JS_

지하철 검색 시스템 만들기

Primary LanguageJavaScript

지하철역 검색 시스템 만들기(subway_search_JS_)

🎯요구사항

  • main.css와 script.js파일만 수정 가능하다
  • 입력창에서 키워드 입력 시 키워드가 포함된 역들의 전체 역명과 노선 이름을 자동완성 리스트 형태로 표시한다.
  • 입력창에 키워드가 있는 상태에서 ‘검색' 버튼이나 'Enter' 키를 누르면 키워드가 포함된 역들의 정보를 볼 수 있다.
  • 검색결과는 역이름을 기준으로 오름차순 정렬한다.
  • 검색결과에는 역명, 노선 이름, 첫차/막차 시간표

🎯🎯심화 요구사항

  • 아래쪽 방향키를 누를 시 위쪽부터 순서대로 자동완성 리스트의 요소가 하이라이트 되면서 해당 요소의 역명이 입력창에 자동으로 입력되고, 사용자가 직접 키워드를 수정하기 전 까지 자동완성 리스트를 유지 한다.
  • 마지막 요소가 하이라이트 된 상태에서 아래쪽 방향키를 누를 시 첫 번째 요소가 하이라이트 된다.
  • 자동완성 리스트 요소 중 역명 부분에서 검색 키워드를 하이라이트 처리 한다.
  • 자동완성 리스트 요소는 10개 이상 표시하지 않는다.
  • 자동완성 리스트 요소는 역명 기준으로 오름차순 정렬한다.

추가 정보

line_num항목의 값은 노선 단축 문자이다.

  • k : 공항철도
  • b : 분당선
  • a : 공항철도
  • g : 경춘선
  • s : 신분당선
  • su : 수인선
  • i : 인천 1호선
  • e : 용인경전철
  • u : 의정부경전철
  • 1-9 : 1-9호선