JqueryUI-자동 완성

자동 완성은 사용자가 텍스트 상자에 입력 한 단어의 시작 부분에 대한 제안 목록을 제공하기 위해 최신 웹 사이트에서 자주 사용되는 메커니즘입니다. 그런 다음 사용자는 목록에서 항목을 선택하면 입력 필드에 표시됩니다. 이 기능은 사용자가 전체 단어 또는 단어 집합을 입력 할 필요가 없도록합니다.

JQueryUI는 자동 완성 위젯을 제공합니다.이 컨트롤은 <select> 드롭 다운처럼 작동하지만 사용자가 컨트롤에 입력하는 것과 일치하는 항목 만 표시하도록 선택 항목을 필터링합니다. jQueryUI는autocomplete() 메소드를 사용하여 입력 필드 아래에 제안 목록을 만들고 관련 요소에 새 CSS 클래스를 추가하여 적절한 스타일을 제공합니다.

입력을받을 수있는 모든 필드는 자동 완성, 즉 <input> 요소, <textarea> 요소 및 contenteditable 특성 이있는 요소 로 변환 될 수 있습니다 .

통사론

그만큼 autocomplete() 방법은 두 가지 형태로 사용될 수 있습니다-

  • $ (selector, context) .autocomplete (options) 메서드

  • $ (selector, context) .autocomplete ( "action", params) 메서드

$ (선택기, 컨텍스트) .autocomplete (옵션) 메서드

자동 완성 기능 (옵션) 메서드는 HTML <input> 요소는 제안 목록 위에 표시됩니다 입력 필드로 관리되어야 함을 선언합니다. 옵션 은 사용자가 입력 필드에 입력하는 것이다 제안 목록의 동작을 지정하는 개체이다 파라미터.

통사론

$(selector, context).autocomplete (options);

Javascript 객체를 사용하여 한 번에 하나 이상의 옵션을 제공 할 수 있습니다. 제공 할 옵션이 두 개 이상인 경우 다음과 같이 쉼표를 사용하여 구분합니다.

$(selector, context).autocomplete({option1: value1, option2: value2..... });

다음 표는 이 방법과 함께 사용할 수있는 다양한 옵션 을 나열합니다.

Sr. 아니. 옵션 및 설명
1 appendTo

이 옵션은 메뉴에 요소를 추가하는 데 사용됩니다. 기본적으로 값은null.

Option - appendTo

이 옵션은 메뉴에 요소를 추가하는 데 사용됩니다. 기본적으로 값은null. 값이 null이면 입력 필드의 부모에서 ui-front 클래스를 확인합니다 . ui-front 클래스가 있는 요소 가 발견되면 메뉴가 해당 요소에 추가됩니다.

Syntax

$( ".selector" ).autocomplete({ appendTo: "#identifier" });
2 autoFocus

이 옵션을 true로 설정 하면 메뉴가 표시 될 때 메뉴의 첫 번째 항목에 자동으로 초점이 맞춰집니다. 기본적으로 값은false.

Option - autoFocus

이 옵션을 true로 설정 하면 메뉴가 표시 될 때 메뉴의 첫 번째 항목에 자동으로 초점이 맞춰집니다. 기본적으로 값은false.

Syntax

$( ".selector" ).autocomplete({ autoFocus: true });
삼 지연

이 옵션은 일치하는 값을 가져 오기 전에 대기해야하는 밀리 초 수를 나타내는 정수입니다 ( source 옵션에 지정된대로 ). 이렇게하면 검색이 시작되기 전에 사용자에게 더 많은 문자를 입력 할 수있는 시간을 제공하여 로컬이 아닌 데이터를 가져올 때 스 래싱을 줄일 수 있습니다. 기본적으로 값은300.

Option - delay

이 옵션은 일치하는 값을 가져 오기 전에 대기해야하는 밀리 초 수를 나타내는 정수입니다 ( source 옵션에 지정된대로 ). 이렇게하면 검색이 시작되기 전에 사용자에게 더 많은 문자를 입력 할 수있는 시간을 제공하여 로컬이 아닌 데이터를 가져올 때 스 래싱을 줄일 수 있습니다. 기본적으로 값은300.

Syntax

$( ".selector" ).autocomplete({ delay: 500 });
4 장애인

이 옵션이 지정되고 true 인 경우 자동 완성 위젯이 처음에 비활성화됩니다. 기본적으로 값은false.

Option - disabled

이 옵션이 지정되고 true 인 경우 자동 완성 위젯이 처음에 비활성화됩니다. 기본적으로 값은false.

Syntax

$( ".selector" ).autocomplete({ disabled: true });
5 minLength

일치하는 값을 가져 오기 전에 입력해야하는 문자 수 (source 옵션에서 지정). 이렇게하면 몇 개의 문자가 세트를 합리적인 수준으로 낮추기에 충분하지 않을 때 너무 큰 값 세트가 표시되는 것을 방지 할 수 있습니다. 기본적으로 값은1.

Option - minLength

일치하는 값을 가져 오기 전에 입력해야하는 문자 수 (source 옵션에서 지정). 이렇게하면 몇 개의 문자가 세트를 합리적인 수준으로 낮추기에 충분하지 않을 때 너무 큰 값 세트가 표시되는 것을 방지 할 수 있습니다. 기본적으로 값은1.

Syntax

$( ".selector" ).autocomplete({ minLength: 0 });
6 위치

이 옵션은 관련 입력 요소와 관련된 제안 메뉴의 위치를 ​​식별합니다. 의 입력 요소에 대한 옵션을 기본값으로,하지만 당신은에 대한 위치에 다른 요소를 지정할 수 있습니다. 기본적으로 값은{ my: "left top", at: "left bottom", collision: "none" }.

Option - position

이 옵션은 관련 입력 요소와 관련된 제안 메뉴의 위치를 ​​식별합니다. 의 입력 요소에 대한 옵션을 기본값으로,하지만 당신은에 대한 위치에 다른 요소를 지정할 수 있습니다. 기본적으로 값은{ my: "left top", at: "left bottom", collision: "none" }.

Syntax

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
7 출처

이 옵션은 입력 데이터와 일치하는 데이터를 얻는 방식을 지정합니다. 값을 제공해야합니다. 그렇지 않으면 자동 완성 위젯이 생성되지 않습니다. 기본적으로 값은none; must be specified.

Option - source

이 옵션은 입력 데이터와 일치하는 데이터를 얻는 방식을 지정합니다. 값을 제공해야합니다. 그렇지 않으면 자동 완성 위젯이 생성되지 않습니다. 이 값은 다음과 같을 수 있습니다.

  • String 일치하는 데이터를 반환 할 서버 리소스의 URL을 나타냅니다.

  • an array 값이 일치 될 로컬 데이터의

  • a function 일치하는 값을 제공하는 일반적인 콜백 역할을합니다.

Syntax

$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

다음 섹션에서는 자동 완성 위젯 기능의 몇 가지 작동 예를 보여줍니다.

기본 기능

다음 예는 자동 완성 위젯 기능의 간단한 예를 보여 주며 매개 변수를 autocomplete() 방법.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. autocompleteexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력이 표시됩니다. 이제 결과를 가지고 놀 수 있습니다.

autoFocus 사용

다음 예제는 옵션의 사용법을 보여줍니다. autoFocus JqueryUI의 자동 완성 위젯에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. autocompleteexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

minLength 및 지연 사용

다음 예제는 두 가지 옵션의 사용법을 보여줍니다. minLength 과 delay JqueryUI의 자동 완성 위젯에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", "Ecommerce", "Jquery", "Groovy", "Java", "JavaScript", "Lua", "Perl", "Ruby", "Scala", "Swing", "XHTML" ]; $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. autocompleteexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

라벨 사용

다음 예제는 옵션의 사용법을 보여줍니다. label JqueryUI의 자동 완성 위젯에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. autocompleteexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

외부 소스 사용

다음 예제는 외부 파일의 사용을 보여줍니다. source JqueryUI 자동 완성 위젯의 옵션.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>

search.php 파일 은 위 파일 (autocompleteexample.html)과 같은 위치에 있습니다. search.php의 내용은 다음과 같습니다.

<?
$term = $_GET[ "term" ];
$companies = array( array( "label" => "JAVA", "value" => "1" ), array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ), array( "label" => "JAVASCRIPT", "value" => "3" ), array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ), array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ), array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ), array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ), array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ), array( "label" => "CLOUD COMPUTING", "value" => "9" ), array( "label" => "DATA MINING", "value" => "10" ), array( "label" => "DATA WAREHOUSE", "value" => "11" ), array( "label" => "E-COMMERCE", "value" => "12" ), array( "label" => "DBMS", "value" => "13" ), array( "label" => "HTTP", "value" => "14" ) ); $result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

위 코드를 HTML 파일에 저장하겠습니다. autocompleteexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

예를 들어 두 글자로 된 단어 입력 : ja, sc 등

$ (selector, context) .autocomplete ( "action", params) 메서드

자동 완성 ( "작업은"PARAMS) 방법은 표시 또는 숨기기 등의 제안 목록에 작업을 수행 할 수 있습니다. 작업은 첫 번째 인수에서 문자열로 지정됩니다 (예 : 목록을 숨기려면 "close"). 다음 표에서 전달할 수있는 조치를 확인하십시오.

통사론

$(selector, context).autocomplete ("action", params);;

다음 표는 이 방법과 함께 사용할 수있는 다양한 작업 을 나열합니다.

Sr. 아니. 액션 및 설명
1 닫기

이 작업은 자동 완성 메뉴에서 제안 목록을 숨 깁니다. 이 메서드는 인수를 허용하지 않습니다.

Action - close

이 작업은 자동 완성 메뉴에서 제안 목록을 숨 깁니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$( ".selector" ).autocomplete("close");
2 멸하다

이 작업은 자동 완성 기능을 제거합니다. 제안 목록이 삭제됩니다. 이 메서드는 인수를 허용하지 않습니다.

Action - destroy

이 작업은 자동 완성 기능을 제거합니다. 제안 목록이 삭제됩니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$( ".selector" ).autocomplete("destroy");
삼 비활성화

이 작업은 자동 완성 메커니즘을 비활성화합니다. 제안 목록이 더 이상 나타나지 않습니다. 이 메서드는 인수를 허용하지 않습니다.

Action - disable

이 작업은 자동 완성 메커니즘을 비활성화합니다. 제안 목록이 더 이상 나타나지 않습니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$( ".selector" ).autocomplete("disable");
4 활성화

이 작업은 자동 완성 메커니즘을 다시 활성화합니다. 제안 목록이 다시 표시됩니다. 이 메서드는 인수를 허용하지 않습니다.

Action - enable

이 작업은 자동 완성 메커니즘을 다시 활성화합니다. 제안 목록이 다시 표시됩니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$( ".selector" ).autocomplete("enable");
5 옵션 (optionName)

이 조치는 지정된 param optionName 의 값을 검색합니다 . 이 옵션은 자동 완성 (옵션)과 함께 사용되는 옵션 중 하나에 해당합니다.

Action - option( optionName )

이 조치는 지정된 param optionName 의 값을 검색합니다 . 이 옵션은 자동 완성 (옵션)과 함께 사용되는 옵션 중 하나에 해당합니다.

Syntax

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
6 선택권

이 작업은 현재 자동 완성 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 객체를 가져옵니다.

Action - option

이 작업은 현재 자동 완성 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 객체를 가져옵니다.

Syntax

var options = $( ".selector" ).autocomplete( "option" );
7 옵션 (optionName, value)

이 조치는 지정된 optionName 과 연관된 자동 완성 옵션의 값을 설정합니다 . optionName 인수 는 설정할 옵션의 이름이고 value 는 옵션에 대해 설정할 값 입니다.

Action - option( optionName, value )

이 조치는 지정된 optionName 과 연관된 자동 완성 옵션의 값을 설정합니다 . optionName 인수 는 설정할 옵션의 이름이고 value 는 옵션에 대해 설정할 값 입니다.

Syntax

$( ".selector" ).autocomplete( "option", "disabled", true );
8 옵션 (옵션)

이 작업은 자동 완성에 대한 하나 이상의 옵션을 설정합니다. 인수 옵션은 옵션 값 쌍의 맵을 설정하는 것입니다.

Action - option( options )

이 작업은 자동 완성에 대한 하나 이상의 옵션을 설정합니다. 인수 옵션은 옵션 값 쌍의 맵을 설정하는 것입니다.

Syntax

$( ".selector" ).autocomplete( "option", { disabled: true } );
9 검색 ([값])

이 작업은 문자열 값과 데이터 소스 ( options.source에 지정됨 ) 간의 일치를 검색합니다 . 최소 문자 수 ( options.minLength에 표시됨) 값에 도달해야합니다. 그렇지 않으면 검색이 수행되지 않습니다.

Action - search( [value ] )

이 작업은 문자열 값과 데이터 소스 ( options.source에 지정됨 ) 간의 일치를 검색합니다 . 최소 문자 수 ( options.minLength에 표시됨) 값에 도달해야합니다. 그렇지 않으면 검색이 수행되지 않습니다.

Syntax

$( ".selector" ).autocomplete( "search", "" );
10 위젯

제안 목록에 해당하는 <ul> DOM 요소를 검색합니다. 이것은 jQuery 선택기를 사용하지 않고 목록에 쉽게 액세스 할 수있는 jQuery 클래스의 객체입니다.

Action - widget

제안 목록에 해당하는 <ul> DOM 요소를 검색합니다. 이것은 jQuery 선택기를 사용하지 않고 목록에 쉽게 액세스 할 수있는 jQuery 클래스의 객체입니다.

Syntax

$( ".selector" ).autocomplete("widget");

예

이제 위 표의 작업을 사용한 예를 살펴 보겠습니다. 다음 예제는 option (optionName, value) 메서드 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({ source: availableTutorials }); $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. autocompleteexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

확장 점

자동 완성 위젯은 위젯 팩토리로 빌드 된대로 확장 할 수 있습니다. 위젯을 확장 할 때 기존 메서드의 동작을 재정의하거나 추가 할 수 있습니다. 다음 표에는 위에 나열된 플러그인 메서드와 동일한 API 안정성을 가진 확장 점 역할을하는 메서드가 나열되어 있습니다 .

Sr. 아니. 방법 및 설명
1 _renderItem (ul, 항목)

이 방법은 위젯 메뉴에서 각 옵션의 생성을 제어합니다. 이 메서드는 새 <li> 요소를 만들고 메뉴에 추가 한 다음 반환합니다.

_renderItem( ul, item )

이 방법은 위젯 메뉴에서 각 옵션의 생성을 제어합니다. 이 메서드는 새 <li> 요소를 만들고 메뉴에 추가 한 다음 반환합니다. 어디-

  • <ul> 새로 생성 된 <li> 요소에 추가되어야하는 요소입니다.

  • item

    될 수 라벨 (문자열) 문자열이 아이템에 표시 또는 값 (문자열)은 항목이 선택 될 때, 값의 입력에 삽입.
2 _renderMenu (ul, 항목)

이 메서드는 위젯의 메뉴 빌드를 제어합니다.

_renderMenu( ul, items )

이 메서드는 위젯의 메뉴 빌드를 제어합니다. 어디-

  • <ul>사용자가 입력 한 용어와 일치하는 항목의 배열입니다. 각 항목은 레이블 및 값 속성 이있는 개체입니다 .
삼 _resizeMenu ()

이 메서드는 메뉴가 표시되기 전에 크기 조정을 제어합니다. 메뉴 요소는 this.menu.element 에서 사용할 수 있습니다 . 이 메서드는 인수를 허용하지 않습니다.

_resizeMenu()

이 메서드는 메뉴가 표시되기 전에 크기 조정을 제어합니다. 메뉴 요소는 this.menu.element 에서 사용할 수 있습니다 . 이 메서드는 인수를 허용하지 않습니다.

자동 완성 요소에 대한 이벤트 관리

이전 섹션에서 본 자동 완성 (옵션) 메소드 외에도 JqueryUI는 특정 이벤트에 대해 트리거되는 이벤트 메소드를 제공합니다. 이러한 이벤트 방법은 다음과 같습니다.

Sr. 아니. 이벤트 방법 및 설명
1 변경 (이벤트, UI)

이 이벤트는 선택에 따라 <input> 요소의 값이 변경 될 때 트리거됩니다. 트리거되면이 이벤트는 항상 닫기 이벤트가 트리거 된 후에 발생합니다.

Event - change(event, ui)

이 이벤트는 선택에 따라 <input> 요소의 값이 변경 될 때 트리거됩니다. 트리거되면이 이벤트는 항상 닫기 이벤트가 트리거 된 후에 발생합니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값은 다음과 같습니다.

  • item− 메뉴에서 선택한 항목 (있는 경우). 그렇지 않으면 속성은 null입니다.

Syntax

$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
2 닫기 (이벤트, UI)

이 이벤트는 자동 완성 메뉴가 닫힐 때마다 트리거됩니다.

Event - close(event, ui)

이 이벤트는 자동 완성 메뉴가 닫힐 때마다 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
삼 생성 (이벤트, UI)

이 이벤트는 자동 완성이 생성 될 때 트리거됩니다.

Event - create(event, ui)

이 이벤트는 자동 완성이 생성 될 때 트리거됩니다. 여기서 event 유형은 Event 이고 ui 유형은 Object 입니다. UI의 가능한 값은 다음과 같습니다.

  • item− 메뉴에서 선택한 항목 (있는 경우). 그렇지 않으면 속성은 null입니다.

Syntax

$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
4 포커스 (이벤트, UI)

이 이벤트는 메뉴 선택 항목 중 하나가 포커스를받을 때마다 트리거됩니다. 취소하지 않는 한 (예 : false 반환) 포커스 된 값은 <input> 요소에 설정됩니다.

Event - focus(event, ui)

이 이벤트는 메뉴 선택 항목 중 하나가 포커스를받을 때마다 트리거됩니다. 취소하지 않는 한 (예 : false 반환) 포커스 된 값은 <input> 요소에 설정됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값은 다음과 같습니다.

  • item − 초점이 맞춰진 항목.

Syntax

$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
5 열기 (이벤트, UI)

이 이벤트는 데이터가 준비되고 메뉴가 열리려고 할 때 트리거됩니다.

Event - open(event, ui)

이 이벤트는 데이터가 준비되고 메뉴가 열리려고 할 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
6 응답 (이벤트, UI)

이 이벤트는 검색이 완료된 후 메뉴가 표시되기 전에 트리거됩니다. 이 이벤트는 검색이 완료되면 항상 트리거됩니다. 결과가 없거나 자동 완성이 비활성화되어 메뉴가 표시되지 않더라도 마찬가지입니다.

Event - response(event, ui)

이 이벤트는 검색이 완료된 후 메뉴가 표시되기 전에 트리거됩니다. 이 이벤트는 검색이 완료되면 항상 트리거됩니다. 결과가 없거나 자동 완성이 비활성화되어 메뉴가 표시되지 않더라도 마찬가지입니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값은 다음과 같습니다.

  • content − 응답 데이터를 포함하며 표시 될 결과를 변경하도록 수정할 수 있습니다.

Syntax

$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
7 검색 (이벤트, UI)

이 이벤트는 지연 및 minLength 기준이 충족 된 후 소스에 지정된 메커니즘이 활성화되기 직전에 트리거 됩니다. 취소하면 검색 작업이 중단됩니다.

Event - search(event, ui)

이 이벤트는 지연 및 minLength 기준이 충족 된 후 소스에 지정된 메커니즘이 활성화되기 직전에 트리거 됩니다. 취소하면 검색 작업이 중단됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});
8 선택 (이벤트, UI)

이 이벤트는 자동 완성 메뉴에서 값을 선택하면 트리거됩니다. 이 이벤트를 취소하면 값이 <input> 요소에 설정되지 않습니다 (그러나 메뉴가 닫히는 것을 막지는 않습니다).

Event - select(event, ui)

이 이벤트는 자동 완성 메뉴에서 값을 선택하면 트리거됩니다. 이 이벤트를 취소하면 값이 <input> 요소에 설정되지 않습니다 (그러나 메뉴가 닫히는 것을 막지는 않습니다). 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값은 다음과 같습니다.

  • item − 선택한 옵션에 대한 레이블 및 값 속성이있는 개체.

Syntax

$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

예

다음 예제는 자동 완성 위젯의 이벤트 메소드 사용을 보여줍니다. 이 예제는 이벤트 focus 및 select 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() { var projects = [ { value: "java", label: "Java", desc: "write once run anywhere", }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", }, { value: "Bootstrap", label: "Twitter Bootstrap", desc: "popular front end frameworks ", } ]; $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc );
                  return false;
               }
            })
				
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>
   
   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. autocompleteexample.htmjavascript를 지원하는 표준 브라우저에서 엽니 다. 또한 다음 출력이 표시되어야합니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved