ÀÚµ¿°Ë»ö ¿Ï¼º ±â´ÉÀ» Áö¿øÇÏ´Â typeahead ¶óÀ̺귯¸® »ç¿ëÇϱâ
¼Ò°³
ÀÎÅÍ³Ý °Ë»öÀ» ÇÏ¸é¼ ¹«½É°á¿¡ »ç¿ëÇÏ°í ÀÖ´Â ±â´ÉÀÌ ÀÖ´Ù. ¹Ù·Î ÀÚµ¿¿Ï¼º ±â´ÉÀÌ´Ù. °Ë»ö¾î¸¦ ¸¸µå´Â Áß ¹Ì¸® ¿¬°ü °Ë»ö¾î¸¦ °¡Á®¿Í¼ ¿Ï¼ºÀ» µ½´Â´Ù. °³¹ß ´Ü°è¿¡¼ ´Ü°ñ¼Õ´ÔÀ¸·Î µîÀåÇÏ´Â ¿ä±¸ »çÇ×ÀÌ´Ù.
ÇØ´ç ±â´ÉÀ» À§ÇÑ ¶óÀ̺귯¸®¸¦ °øÀ¯ ÇÑ´Ù.
À§ ±×¸²Àº À¯»çÇÑ ¶óÀ̺귯¸®ÀÎ jQuery autocomplete ¿Í typeahead ÀÇ °ü½Éµµ Åë°è ÀÌ´Ù. ±¸±Û Æ®·£µå¸¦ »ç¿ëÇÏ¿´´Ù. »ç¿ë·®Àº Áõ°¡ÇÏ´Â Ãß¼¼ ÀÌ´Ù.
2°¡ÁöÀÇ ¶óÀ̺귯¸®·Î ±¸¼º µÇ¾î ÀÖ´Ù.
- bloodhound.js (standalone suggestion engine)
- typeahead.jquery.js (standalone UI view)
°Ë»öÀ» ´ã´çÇÏ´Â bloodhound.js ¿Í, À̺¥Æ® 󸮸¦ ´ã´çÇÏ´Â typeahead.jquery.js ·Î ±¸¼º µÇ¾î ÀÖ´Ù. ½ÇÁ¦ ¶óÀ̺귯¸®¸¦ »ç¿ëÇÒ ¶§¿¡´Â bundle ¹öÀüÀ» »ç¿ë ÇÑ´Ù. µÎ °¡Áö ±â´ÉÀ» Æ÷ÇÔÇÏ°í ÀÖ´Ù.
ºê¶ó¿ìÀú Áö¿ø ¿©ºÎ
Chrome | Firefox | Safari | Internet Explorer | Opera |
---|---|---|---|---|
ALL | 3.5+ | 4+ | 8+ | 11+ |
¶óÀ̺귯¸® »ç¿ë¿¡ ¾Õ¼ Áö¿ø ºê¶ó¿ìÀú È®ÀÎÀº ÇÊ¿ä ÇÏ´Ù. ÇÁ·ÎÁ§Æ® Á¤Ã¥¿¡ ¸ÂÁö ¾Ê´Â ºê¶ó¿ìÀú°¡ ÀÖ´Â °æ¿ì, ¿ï¸ç °ÜÀÚ¸Ô±â·Î °³¹ßÇÏ´Â °æ¿ì°¡ »ý±æ ¼ö Àֱ⠶§¹® ÀÌ´Ù.
Ư¡
ÀÚµ¿¿Ï¼º ½Ã ½ÃÁ¡¸¶´Ù À̺¥Æ®°¡ ±¸ÇöµÇ¾î ÀÖ¾î, °³¹ßÀÌ Æí¸® ÇÏ´Ù.
- typeahead:open ( °Ë»ö â ¿¸² )
- typeahead:rendered ( °Ë»ö °á°ú »ý¼º )
- typeahead:cursorchanged ( À§ ¾Æ·¡ Ä¿¼ À̵¿ )
- typeahead:selected ( ¼±Åà )
- typeahead:autocompleted ( °Ë»ö¾î ÀÚµ¿¿Ï¼º Tab Å° )
»ç¿ë ¿¹Á¦
Âü°í »çÀÌÆ®
- https://www.google.com/trends/explore#q=jquery%20autocomplete%2Ctypeahead
- https://github.com/twitter/typeahead.js
- http://twitter.github.io/typeahead.js/examples/
Ãâó: http://blog.whitelife.co.kr/291 [White Life Story]