검색어 입력바 UI 구성 및 기능
- 검색어를 입력할 'text input'
- 검색어 두글자 이상 입력 시 노출되는 '추천검색어 list'
- 입력한 검색어로 검색요청을 위한 '검색 button'
사용 편의성을 높일 수 있는 방안 [데스크톱 환경]
키보드 입력 이벤트를 활용하기
- text input 에서 키보드 아래 방향키를 누르면 추천검색어 list 의 첫번째 item 이 선택되도록 하기
- 추천검색어 list 에서 키보드 아래 방향키를 누르면 다음 item 이 선택되도록 하기 (다음 item 이 없는 경우는 제외)
- 추천검색어 첫번째 item 에서 키보드 위 방향키를 누르면 text input 으로 커서 이동시키기
- 추천검색어 item 항목에서 키보드 Enter키를 누르면 text input 으로 입력 커서를 이동시키고 선택된 item 값을 text input 에 적용시키기
- text input 에 입력 커서가 있는 상태에서 키보드 Enter키를 누르면 검색버튼 submit 액션 발생시키기 (만약 text input 이 <form> 태그의 자식요소인 경우, 이벤트핸들러를 구현하지 않아도 됨)
사용 편의성을 높일 수 있는 방안 [모바일, 태블릿 환경]
- 생각 중
구현 소스코드
현재 모바일 편의성은 미구현
See the Pen ui__searchTextInput by braden-Lee (@braden-lee) on CodePen.