jQuery 자동 완성

jQuery Autocomplete

jQuery Autocomplete 플러그인은 사용자 입력 값을 기반으로 검색 및 필터링하여 사용자가 미리 설정된 값 목록에서 빠르게 찾고 선택할 수 있도록 합니다. 자동 완성 필드에 초점을 맞추거나 문자를 입력하면 플러그인이 일치하는 항목 검색을 시작하고 선택할 값 목록을 표시합니다. 더 많은 문자를 입력하면 사용자는 더 나은 일치 항목을 찾기 위해 목록을 필터링할 수 있습니다.

이 플러그인은 이제 jQuery UI의 일부이며 독립 버전은 더 이상 업데이트되지 않습니다. 현재 버전은 1.6입니다.

jQuery Autocomplete 공식 웹사이트를 방문하여 jQuery Autocomplete 플러그인을 다운로드하세요.

시연 예시

jQuery Autocomplete 플러그인 시연입니다.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

코드를 실행하여 시험해 보세요

지속적인 학습

새로운 파일

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </body> </html>

제출하다 코드 재설정

자동운전