검색

[JS] 검색어 자동완성 기능

위와 같은 자동완성 기능은 우리가 흔히 접할 수 있는 UI 요소입니다. ※ 초성검색 적용 버전 코드도 있습니다. 예제 코드 See the Pen JS Autocomplete by hyukson (@hyukson) on CodePen. HTML 태그 사용하기 HTML에는 Input 자동완성 기능을 이용할 수 있도록 해주는, datalist 태그와 list 속성이 존재합니다. 하지만, 다양한 이벤트 설정이 어렵고 커스텀이 힘들다는 단점을 보완하기 위해서 자바스크립트로 구현해 보았습니다. 코드 풀이 먼저 검색어를 입력받을 Input 요소와 자동완성을 시켜줄 리스트 요소를 하나 생성해 줍니다. /* active 클래스를 가진 요소에 대해 */ .autocomplete > div.active { backgroun..

[JS] 초성검색 구현하기

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다. 한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub. github.com 'hangul-util' 코드와 '한글 초성, 중성, 종성 구하기' 포스트를 기반으로 작성된 글입니다. includeByCho('ㄱ', '귤') // true includeByCho('ㅅ과', '사과') // true 코드 예시 See the Pen includeByCho by hyukson (@hyukson) on CodePen. 코드 const CHO_HANGUL = [ 'ㄱ', 'ㄲ', 'ㄴ',..