본문 바로가기
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
반응형
저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

jQuery 비슷한 ID, Name 찾기  (0) 2022.05.03
autocomplete 높이 고정  (0) 2013.05.06
jquery autocomplete selectFirst, minLength  (0) 2013.05.06
jquery를 이용한 ajax 처리  (0) 2013.05.06
스크롤 이벤트 처리  (1) 2011.02.11
FireFox javascript의 innerText 문제  (0) 2011.01.05

'Javascript' Related Articles

티스토리툴바