Javascript

Jquery autocomplete

엔젤루스 2013. 5. 6. 13:05
728x90
반응형

가끔 문자를 입력했을 때 해당 문자에 맞는 데이터를 가져와 리스트를 드롭다운 박스 처럼 보여줘야 되는 경우가 있죠. 그때 사용하기 편리한 Jquery 플로그인을 소개할께요.

 

바로 autocomplete입니다. 이것을 사용하기 위해서는 이 3가지를 먼저 추가해 줘야 합니다. 


Code Snippet
  1. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  2. <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  3. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>


혹시  css는 필요하지 않겠지 하고 추가를 안 하시면 좀 당황스러운 상황을 맞이하게 됩니다. 그러니 꼭 3개다 추가를 하시면 되겠습니다.

 

우선 input태그의 text 타입을 하나 넣어 주시고, 스크립트에 우선 검색할 이름들을 아래와 같이 등록합니다. 


Code Snippet
  1. <body>
  2.     <form runat="server">
  3.         <input id="test" type="text" />
  4.     </form>
  5.     <script type="text/javascript">
  6.         $(function () {
  7.             var availableTags = [
  8.               "ActionScript",
  9.               "AppleScript",
  10.               "Asp",
  11.               "BASIC",
  12.               "C",
  13.               "C++",
  14.               "Clojure",
  15.               "COBOL",
  16.               "ColdFusion",
  17.               "Erlang",
  18.               "Fortran",
  19.               "Groovy",
  20.               "Haskell",
  21.               "Java",
  22.               "JavaScript",
  23.               "Lisp",
  24.               "Perl",
  25.               "PHP",
  26.               "Python",
  27.               "Ruby",
  28.               "Scala",
  29.               "Scheme"
  30.             ];
  31.             $('#test').autocomplete({
  32.                 source: availableTags,
  33.                 select: function (event, ui) {
  34.                     //아이템 선택시 처리 코드
  35.                 },
  36.                 selectFirst: true,
  37.                 minLength: 4,
  38.                 open: function () {
  39.                     $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
  40.                 },
  41.                 close: function () {
  42.                     $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
  43.                 }
  44.             });
  45.         });
  46.         
  47.     </script>
  48. </body>


그리고 textbox의 아이디에 autocomplete을 걸어주는거죠. 그러면 아래 이미지와 같이 텍스트를 입력하면 해당 문자가 들어 있는 이름을 검색하여 줍니다.


기본적인 autocomplete에 대해서 알아 보았습니다.


도움이 되었으면 좋겠네요. ^^

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)