JqueryUI - Tự động điền

Tự động hoàn thành là một cơ chế thường được sử dụng trong các trang web hiện đại để cung cấp cho người dùng danh sách các gợi ý về đầu từ mà họ đã nhập vào hộp văn bản. Sau đó, người dùng có thể chọn một mục từ danh sách, mục này sẽ được hiển thị trong trường nhập. Tính năng này giúp người dùng không phải nhập toàn bộ từ hoặc một nhóm từ.

JQueryUI cung cấp một tiện ích tự động hoàn thành - một điều khiển hoạt động giống như một trình đơn thả xuống <select>, nhưng lọc các lựa chọn để chỉ hiển thị những lựa chọn phù hợp với những gì người dùng đang nhập vào một điều khiển. jQueryUI cung cấpautocomplete() để tạo danh sách các đề xuất bên dưới trường đầu vào và thêm các lớp CSS mới vào các phần tử có liên quan để tạo cho chúng kiểu phù hợp.

Bất kỳ trường nào có thể nhận đầu vào đều có thể được chuyển đổi thành Tự động hoàn thành, cụ thể là các phần tử <input> , phần tử <textareosystem và các phần tử có thuộc tính contenteditable .

Cú pháp

Các autocomplete() phương pháp có thể được sử dụng ở hai dạng:

  • $ (selector, ngữ cảnh) .autocomplete (tùy chọn) Phương pháp

  • $ (bộ chọn, ngữ cảnh) .autocomplete ("action", params) Phương thức

$ (bộ chọn, ngữ cảnh) .autocomplete (tùy chọn)

Phương thức tự động điền (tùy chọn) khai báo rằng phần tử HTML <input> phải được quản lý như một trường đầu vào sẽ được hiển thị phía trên danh sách các đề xuất. Các tùy chọn tham số là một đối tượng mà xác định hành vi của danh sách đề xuất khi người dùng gõ trong lĩnh vực đầu vào.

Cú pháp

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

Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách sử dụng đối tượng Javascript. Nếu có nhiều tùy chọn được cung cấp thì bạn sẽ phân tách chúng bằng dấu phẩy như sau:

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

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Tùy chọn & Mô tả
1 appendTo

Tùy chọn này được sử dụng để thêm một phần tử vào menu. Theo mặc định, giá trị của nó lànull.

Option - appendTo

Tùy chọn này được sử dụng để thêm một phần tử vào menu. Theo mặc định, giá trị của nó lànull. Khi giá trị là null, trường cha mẹ của trường đầu vào sẽ được kiểm tra cho một lớp ui-front . Nếu một phần tử có lớp ui-front được tìm thấy, menu sẽ được thêm vào phần tử đó.

Syntax

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

Tùy chọn này khi được đặt thành true , mục đầu tiên của menu sẽ tự động được lấy tiêu điểm khi menu hiển thị. Theo mặc định, giá trị của nó làfalse.

Option - autoFocus

Tùy chọn này khi được đặt thành true , mục đầu tiên của menu sẽ tự động được lấy tiêu điểm khi menu hiển thị. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).autocomplete({ autoFocus: true });
3 sự chậm trễ

Tùy chọn này là Số nguyên đại diện cho số mili giây phải chờ trước khi cố gắng lấy các giá trị phù hợp (như được chỉ định bởi tùy chọn nguồn ). Điều này có thể giúp giảm bớt sự cố khi dữ liệu không phải cục bộ đang được lấy bằng cách cho người dùng thời gian để nhập thêm ký tự trước khi bắt đầu tìm kiếm. Theo mặc định, giá trị của nó là300.

Option - delay

Tùy chọn này là Số nguyên đại diện cho số mili giây phải chờ trước khi cố gắng lấy các giá trị phù hợp (như được chỉ định bởi tùy chọn nguồn ). Điều này có thể giúp giảm bớt sự cố khi dữ liệu không phải cục bộ đang được lấy bằng cách cho người dùng thời gian để nhập thêm ký tự trước khi bắt đầu tìm kiếm. Theo mặc định, giá trị của nó là300.

Syntax

$( ".selector" ).autocomplete({ delay: 500 });
4 tàn tật

Tùy chọn này nếu được chỉ định và đúng , tiện ích con tự động hoàn thành ban đầu sẽ bị tắt. Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này nếu được chỉ định và đúng , tiện ích con tự động hoàn thành ban đầu sẽ bị tắt. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).autocomplete({ disabled: true });
5 Độ dài nhỏ nhất

Số ký tự phải được nhập trước khi cố gắng lấy các giá trị phù hợp (như được chỉ định bởi tùy chọn nguồn). Điều này có thể ngăn một bộ giá trị quá lớn được hiển thị khi một vài ký tự không đủ để giảm bộ giá trị xuống mức hợp lý. Theo mặc định, giá trị của nó là1.

Option - minLength

Số ký tự phải được nhập trước khi cố gắng lấy các giá trị phù hợp (như được chỉ định bởi tùy chọn nguồn). Điều này có thể ngăn một bộ giá trị quá lớn được hiển thị khi một vài ký tự không đủ để giảm bộ giá trị xuống mức hợp lý. Theo mặc định, giá trị của nó là1.

Syntax

$( ".selector" ).autocomplete({ minLength: 0 });
6 Chức vụ

Tùy chọn này xác định vị trí của menu đề xuất liên quan đến phần tử đầu vào được liên kết. Các các tùy chọn mặc định là yếu tố đầu vào, nhưng bạn có thể chỉ định một yếu tố khác về vị trí chống lại. Theo mặc định, giá trị của nó là{ my: "left top", at: "left bottom", collision: "none" }.

Option - position

Tùy chọn này xác định vị trí của menu đề xuất liên quan đến phần tử đầu vào được liên kết. Các các tùy chọn mặc định là yếu tố đầu vào, nhưng bạn có thể chỉ định một yếu tố khác về vị trí chống lại. Theo mặc định, giá trị của nó là{ my: "left top", at: "left bottom", collision: "none" }.

Syntax

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
7 nguồn

Tùy chọn này chỉ định cách lấy dữ liệu khớp với dữ liệu đầu vào. Giá trị phải được cung cấp nếu không tiện ích con tự động hoàn thành sẽ không được tạo. Theo mặc định, giá trị của nó lànone; must be specified.

Option - source

Tùy chọn này chỉ định cách lấy dữ liệu khớp với dữ liệu đầu vào. Giá trị phải được cung cấp nếu không tiện ích con tự động hoàn thành sẽ không được tạo. Giá trị này có thể là:

  • String đại diện cho URL của tài nguyên máy chủ sẽ trả về dữ liệu phù hợp,

  • an array dữ liệu cục bộ mà từ đó giá trị sẽ được khớp, hoặc

  • a function đóng vai trò như một lệnh gọi lại chung từ việc cung cấp các giá trị phù hợp.

Syntax

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

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động về chức năng tiện ích tự động hoàn thành.

Chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng tiện ích con tự động hoàn thành, không chuyển tham số nào cho autocomplete() phương pháp.

<!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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML autocompleteexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Sử dụng AutoFocus

Ví dụ sau minh họa việc sử dụng tùy chọn autoFocus trong tiện ích con tự động hoàn thành của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML autocompleteexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Sử dụng minLength và delay

Ví dụ sau minh họa việc sử dụng hai tùy chọn minLength và delay trong tiện ích con tự động hoàn thành của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML autocompleteexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Sử dụng nhãn

Ví dụ sau minh họa việc sử dụng tùy chọn label trong tiện ích con tự động hoàn thành của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML autocompleteexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Sử dụng nguồn bên ngoài

Ví dụ sau minh họa việc sử dụng tệp bên ngoài cho source trong tiện ích con tự động hoàn thành của 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>

Tệp search.php được đặt ở cùng vị trí với tệp ở trên (autocompleteexample.html). Nội dung của search.php như sau:

<?
$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 );
?>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML autocompleteexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Nhập hai từ ký tự cho ví dụ: ja, sc, v.v.

$ (bộ chọn, ngữ cảnh) .autocomplete ("action", params) Phương thức

Phương thức autocomplete ("action", params) có thể thực hiện một hành động trên danh sách các đề xuất, chẳng hạn như hiển thị hoặc ẩn. Hành động được chỉ định dưới dạng Chuỗi trong đối số đầu tiên (ví dụ: "đóng" để ẩn danh sách). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

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

Bảng sau liệt kê các hành động khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Mô tả hành động
1 đóng

Hành động này ẩn danh sách đề xuất trong menu Tự động hoàn thành. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - close

Hành động này ẩn danh sách đề xuất trong menu Tự động hoàn thành. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).autocomplete("close");
2 hủy hoại

Hành động này sẽ xóa chức năng tự động hoàn thành. Danh sách đề xuất bị xóa. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - destroy

Hành động này sẽ xóa chức năng tự động hoàn thành. Danh sách đề xuất bị xóa. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).autocomplete("destroy");
3 vô hiệu hóa

Hành động này vô hiệu hóa cơ chế tự động hoàn thành. Danh sách đề xuất không còn xuất hiện nữa. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - disable

Hành động này vô hiệu hóa cơ chế tự động hoàn thành. Danh sách đề xuất không còn xuất hiện nữa. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).autocomplete("disable");
4 kích hoạt

Hành động này sẽ kích hoạt lại cơ chế tự động hoàn thành. Danh sách các đề xuất sẽ lại được hiển thị. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - enable

Hành động này sẽ kích hoạt lại cơ chế tự động hoàn thành. Danh sách các đề xuất sẽ lại được hiển thị. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).autocomplete("enable");
5 option (optionName)

Hành động này truy xuất giá trị của param optionName được chỉ định . Tùy chọn này tương ứng với một trong những tùy chọn được sử dụng với tự động hoàn thành (tùy chọn).

Action - option( optionName )

Hành động này truy xuất giá trị của param optionName được chỉ định . Tùy chọn này tương ứng với một trong những tùy chọn được sử dụng với tự động hoàn thành (tùy chọn).

Syntax

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
6 Lựa chọn

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn tự động hoàn thành hiện tại.

Action - option

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn tự động hoàn thành hiện tại.

Syntax

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

Hành động này đặt giá trị của các tùy chọn tự động hoàn liên quan đến việc xác định optionName . Đối số optionName là tên của tùy chọn được đặt và giá trị là giá trị được đặt cho tùy chọn.

Action - option( optionName, value )

Hành động này đặt giá trị của các tùy chọn tự động hoàn liên quan đến việc xác định optionName . Đối số optionName là tên của tùy chọn được đặt và giá trị là giá trị được đặt cho tùy chọn.

Syntax

$( ".selector" ).autocomplete( "option", "disabled", true );
số 8 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho quá trình tự động hoàn thành. Các tùy chọn đối số là một bản đồ của các cặp tùy chọn-giá trị được đặt.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho quá trình tự động hoàn thành. Các tùy chọn đối số là một bản đồ của các cặp tùy chọn-giá trị được đặt.

Syntax

$( ".selector" ).autocomplete( "option", { disabled: true } );
9 tìm kiếm ([giá trị])

Hành động này tìm kiếm sự tương ứng giữa giá trị chuỗi và nguồn dữ liệu (được chỉ định trong options.source ). Số ký tự tối thiểu (được chỉ ra trong options.minLength ) phải đạt đến giá trị, nếu không tìm kiếm sẽ không được thực hiện.

Action - search( [value ] )

Hành động này tìm kiếm sự tương ứng giữa giá trị chuỗi và nguồn dữ liệu (được chỉ định trong options.source ). Số ký tự tối thiểu (được chỉ ra trong options.minLength ) phải đạt đến giá trị, nếu không tìm kiếm sẽ không được thực hiện.

Syntax

$( ".selector" ).autocomplete( "search", "" );
10 phụ tùng

Truy xuất phần tử <ul> DOM tương ứng với danh sách gợi ý. Đây là một đối tượng của lớp jQuery cho phép dễ dàng truy cập vào danh sách mà không cần sử dụng bộ chọn jQuery.

Action - widget

Truy xuất phần tử <ul> DOM tương ứng với danh sách gợi ý. Đây là một đối tượng của lớp jQuery cho phép dễ dàng truy cập vào danh sách mà không cần sử dụng bộ chọn jQuery.

Syntax

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

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng phương thức 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML autocompleteexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Điểm mở rộng

Tiện ích con tự động hoàn thành có thể được mở rộng khi nó được xây dựng với nhà máy sản xuất tiện ích con. Khi mở rộng widget, bạn có khả năng ghi đè hoặc thêm vào hành vi của các phương thức hiện có. Bảng sau liệt kê các phương thức hoạt động như điểm mở rộng có cùng độ ổn định API như các phương thức plugin được liệt kê ở trên .

Sr.No. Phương pháp & Mô tả
1 _renderItem (ul, item)

Phương pháp này kiểm soát việc tạo từng tùy chọn trong menu của tiện ích con. Phương thức này tạo một phần tử <li> mới, gắn nó vào menu và trả lại nó.

_renderItem( ul, item )

Phương pháp này kiểm soát việc tạo từng tùy chọn trong menu của tiện ích con. Phương thức này tạo một phần tử <li> mới, gắn nó vào menu và trả lại nó. Ở đâu -

  • <ul> là phần tử phải được nối vào phần tử <li> mới được tạo.

  • item

    có thể là một nhãn (Chuỗi) , chuỗi để hiển thị cho mục hoặc một giá trị (Chuỗi) , giá trị để chèn vào đầu vào khi mục được chọn.
2 _renderMenu (ul, vật phẩm)

Phương pháp này kiểm soát việc xây dựng menu của tiện ích con.

_renderMenu( ul, items )

Phương pháp này kiểm soát việc xây dựng menu của tiện ích con. Ở đâu -

  • <ul>là một Mảng các mục phù hợp với cụm từ người dùng đã nhập. Mỗi mục là một Đối tượng với các thuộc tính nhãn và giá trị .
3 _resizeMenu ()

Phương pháp này kiểm soát việc định cỡ menu trước khi nó được hiển thị. Phần tử menu có sẵn tại this.menu.element . Phương pháp này không chấp nhận bất kỳ đối số nào.

_resizeMenu()

Phương pháp này kiểm soát việc định cỡ menu trước khi nó được hiển thị. Phần tử menu có sẵn tại this.menu.element . Phương pháp này không chấp nhận bất kỳ đối số nào.

Quản lý sự kiện trên các phần tử tự động hoàn thành

Ngoài phương thức tự động hoàn thành (tùy chọn) mà chúng ta đã thấy trong các phần trước, JqueryUI cung cấp các phương thức sự kiện được kích hoạt cho một sự kiện cụ thể. Các phương thức sự kiện này được liệt kê bên dưới -

Sr.No. Phương pháp & Mô tả Sự kiện
1 thay đổi (sự kiện, ui)

Sự kiện này được kích hoạt khi giá trị của phần tử <input> được thay đổi dựa trên một lựa chọn. Khi được kích hoạt, sự kiện này sẽ luôn xảy ra sau khi sự kiện đóng được kích hoạt.

Event - change(event, ui)

Sự kiện này được kích hoạt khi giá trị của phần tử <input> được thay đổi dựa trên một lựa chọn. Khi được kích hoạt, sự kiện này sẽ luôn xảy ra sau khi sự kiện đóng được kích hoạt. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • item- Mục được chọn từ menu, nếu có. Nếu không thuộc tính là null.

Syntax

$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
2 đóng (sự kiện, ui)

Sự kiện này được kích hoạt bất cứ khi nào đóng menu tự động hoàn thành.

Event - close(event, ui)

Sự kiện này được kích hoạt bất cứ khi nào đóng menu tự động hoàn thành. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
3 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi tự động hoàn thành được tạo.

Event - create(event, ui)

Sự kiện này được kích hoạt khi tự động hoàn thành được tạo .. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • item- Mục được chọn từ menu, nếu có. Nếu không thuộc tính là null.

Syntax

$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
4 tiêu điểm (sự kiện, ui)

Sự kiện này được kích hoạt bất cứ khi nào một trong các lựa chọn menu nhận được tiêu điểm. Trừ khi bị hủy bỏ (ví dụ: bằng cách trả về false), giá trị tập trung được đặt vào phần tử <input>.

Event - focus(event, ui)

Sự kiện này được kích hoạt bất cứ khi nào một trong các lựa chọn menu nhận được tiêu điểm. Trừ khi bị hủy bỏ (ví dụ: bằng cách trả về false), giá trị tập trung được đặt vào phần tử <input>. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • item - Mục tiêu điểm.

Syntax

$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
5 mở (sự kiện, ui)

Sự kiện này được kích hoạt sau khi dữ liệu đã được chuẩn bị xong và menu sắp mở.

Event - open(event, ui)

Sự kiện này được kích hoạt sau khi dữ liệu đã được chuẩn bị xong và menu sắp mở. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
6 phản hồi (sự kiện, ui)

Sự kiện này được kích hoạt sau khi tìm kiếm hoàn tất, trước khi menu được hiển thị. Sự kiện này luôn được kích hoạt khi tìm kiếm hoàn tất, ngay cả khi menu sẽ không được hiển thị vì không có kết quả hoặc tính năng Tự động hoàn thành bị tắt.

Event - response(event, ui)

Sự kiện này được kích hoạt sau khi tìm kiếm hoàn tất, trước khi menu được hiển thị. Sự kiện này luôn được kích hoạt khi tìm kiếm hoàn tất, ngay cả khi menu sẽ không được hiển thị vì không có kết quả hoặc tính năng Tự động hoàn thành bị tắt. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • content - Chứa dữ liệu phản hồi và có thể được sửa đổi để thay đổi kết quả sẽ được hiển thị.

Syntax

$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
7 tìm kiếm (sự kiện, ui)

Sự kiện này được kích hoạt sau khi đáp ứng mọi tiêu chí về độ trễ và minLength , ngay trước khi cơ chế được chỉ định bởi nguồn được kích hoạt. Nếu bị hủy, hoạt động tìm kiếm sẽ bị hủy bỏ.

Event - search(event, ui)

Sự kiện này được kích hoạt sau khi đáp ứng mọi tiêu chí về độ trễ và minLength , ngay trước khi cơ chế được chỉ định bởi nguồn được kích hoạt. Nếu bị hủy, hoạt động tìm kiếm sẽ bị hủy bỏ. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});
số 8 chọn (sự kiện, ui)

Sự kiện này được kích hoạt khi một giá trị được chọn từ menu tự động hoàn thành. Việc hủy sự kiện này sẽ ngăn không cho giá trị được đặt vào phần tử <input> (nhưng không ngăn menu đóng).

Event - select(event, ui)

Sự kiện này được kích hoạt khi một giá trị được chọn từ menu tự động hoàn thành. Việc hủy sự kiện này sẽ ngăn không cho giá trị được đặt vào phần tử <input> (nhưng không ngăn menu đóng). Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • item - Một Đối tượng với các thuộc tính nhãn và giá trị cho tùy chọn đã chọn.

Syntax

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

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện trong các tiện ích con tự động hoàn thành. Ví dụ này minh họa việc sử dụng tiêu điểm sự kiện và chọn .

<!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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML autocompleteexample.htmvà mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript. Bạn cũng phải xem kết quả sau:

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