자동완성을 구현할 일이 생겨서 찾아보던 차에 좋은 plugin을 발견했네요.
jQuery Autocomplete 플러그인인데요.
http://dndrb0.blog.me/120205427972
저는 이분이 올려놓으신 거 좀 수정해서 다시 올려봅니다.
Autocomplete.zip => 다운로드 받아서 실행해 보세요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>자동완성</title> <script type="text/javascript" src="jquery/lib/jquery.js"></script> <script type='text/javascript' src='jquery/lib/jquery.bgiframe.min.js'></script> <script type='text/javascript' src='jquery/lib/jquery.ajaxQueue.js'></script> <script type='text/javascript' src='jquery/jquery.autocomplete.js'></script> <link rel="stylesheet" type="text/css" href="jquery/jquery.autocomplete.css" /> </head> <body> <script> var availableTags = [ '가나', '가나쵸콜렛', '갈갈이 삼형제', '북마크', '북까페', '엄마', '아빠', '북소리', '여러분', '소문', '소문난 식당', '나나나', '쇼', '쇼팽', '모나미', '한강', '강강수월래', '강촌', '제주도', '삼총사', '먹보', '먹소리', '수박', '수박 겉핥기' ]; $(document).ready(function() { $("#searchbox").autocomplete(availableTags,{ matchContains: true, selectFirst: false }); }); </script> </body> </html> | cs |
글자 순서대로 검색되게 하려면 이렇게 하시면 되구요.
matchContains: true
입력한 글자가 들어간 모든 검색어를 보여주려면 아래처럼 하시면 됩니다.
matchContains: false
'프로그래밍 언어 > jQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 플러그인(plugin)으로 숫자입력, 알파벳입력 구현하기 - jquery.alphanum.js (0) | 2015.07.15 |
|---|---|
| [jQuery] 제이쿼리로 전체선택/선택해제 구현하기 (0) | 2015.07.15 |
| [jQuery] 제이쿼리 항상 가장 최신(마지막) 버전 링크 url 사용하기 (0) | 2015.06.18 |
| [jQuery] 제이쿼리로 중복 클릭 방지를 위한 레이어 팝업 띄우기 (8) | 2015.04.14 |
| [jQuery] 제이쿼리로 만들어진 막강한 기능의 정말 괜찮은 tree - zTree (0) | 2015.03.23 |
댓글