티스토리 뷰
자동완성을 구현할 일이 생겨서 찾아보던 차에 좋은 plugin을 발견했네요.
jQuery Autocomplete 플러그인인데요.
http://dndrb0.blog.me/120205427972
http://zzznara2.tistory.com/299
저는 저 두분이 하신거 공유만 합니다.
<!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 = [ '가나', '가나쵸콜렛', '갈갈이 삼형제', '북마크', '북까페', '엄마', '아빠', '북소리', '여러분', '소문', '소문난 식당', '나나나', '쇼', '쇼팽', '모나미', '한강', '강강수월래', '강촌', '제주도', '삼총사', '먹보', '먹소리', '수박', '수박 겉핥기' ]; </script><script> $(document).ready(function() { $("#searchbox").autocomplete(availableTags,{ matchContains: true, selectFirst: false }); }); </script> </body> </html>
글자 순서대로 검색되게 하려면 이렇게 하시면 되구요.
matchContains: true
입력한 글자가 들어간 모든 검색어를 보여주려면 아래처럼 하시면 됩니다.
matchContains: false
'program' 카테고리의 다른 글
자소단위 자동완성 기능 구현 (0) | 2017.02.09 |
---|---|
Auto-Suggest Control(검색어 자동완성) (0) | 2017.02.09 |
[MySQL] 세로열을 가로열로 출력하기 (0) | 2017.02.03 |
[iBatis] NUMBER(INT) 타입 컬럼 처리 시 cast 오류 발생 (0) | 2017.02.03 |
[Vimeo Apis] 영상 제어 Apis (0) | 2017.02.02 |