jQuery UI 라이브러리 중 autocomplete 기능을 활용해 무언가 만들어 보면 재밌을 것 같았습니다. 간단히 한글 단어 몇 가지를 변수에 저장해 input 태그에 글자를 입력하면 저장된 변수와 일치하는 단어를 보여주는 기능을 하는 소스입니다. API를 이용해 한글 단어를 가져오는 방법도 있었지만, 간단히 예제 형식으로 만드는 것이라 API를 사용하지는 않았습니다. 또 다른 방법으로는 DB에 한글 단어를 많이 저장해 일치하는 추천 한글 단어를 보여주는 기능을 만들어도 재밌을 것 같습니다.
간단히 소스 설명을 작성하자면 먼저 jQuery UI를 멋지게 꾸며주기 위해 CSS 파일 하나, 그리고 jQuery를 이용해야 하기에 jQuery 첨부하나, 그리고 jQuery UI를 사용하기 위해 jQuery-UI 파일 하나를 첨부했습니다.
소스 중 재밌는 부분은 map을 사용해 일치하는 단어를 찾아내 배열로 반환 받은 뒤 jQuery UI Autocomplete 에서 제공하는 매개변수 request.term(사용자가 입력한 글자)을 이용해 맞는 글자들만 골라내는 부분이 소스 코드에서 재밌는 부분인 것 같습니다.
See the Pen Untitled by zzarungna (@zzarungna) on CodePen.
jQuery UI autocomplete 기능을 잘 이용하면 웹페이지 화면을 꽤 재밌게 구성할 수 있을 것 같습니다. 시간이 된다면 jQuery UI의 다른 기능들도 활용해 봐야 하겠습니다. jQuery UI autocomplete 사용 방법이 필요하셨던 분들은 제가 작성한 예제 소스 코드를 복사해서 활용하시면 좋을 것 같습니다.