Tạo chức năng tự động hoàn tất nhập liệu với thư viện jQuery UI Autocomplete (Phần 2)

https://api.jqueryui.com/autocomplete/

https://config.phpconfig.php

<?php
session_start();
$host     = "localhost";
$user     = "root";
$password = "";
$dbname   = "tutorial";
$con      = mysqli_connect($host, $user, $password, $dbname);
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

https://fetchData.phpfetchdata.php

<?php
include "config.php";
if (isset($_POST['search'])) {
  $search = $_POST['search'];
  $query  = "SELECT * FROM users WHERE name like'%" . $search . "%'";
  $result = mysqli_query($con, $query);
  while ($row = mysqli_fetch_array($result)) {
    $response[] = array(
      "value" => $row['id'],
      "label" => $row['name'],
    );
  }
  echo json_encode($response);
}

Options: autoFocus

Nếu được đặt thành true, mục đầu tiên sẽ tự động được tập trung khi menu được hiển thị.

<!doctype html>
<html>

<head>
  <title>jQuery UI autocomplete with PHP and AJAX</title>
  <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
  <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
  <script src='jquery-ui.min.js' type='text/javascript'></script>
</head>
<body>
  <script type='text/javascript'>
  jQuery(document).ready(function($) {
    $(".selector").autocomplete({
      source: function(request, response) {
        $.ajax({
          url: "fetchData.php",
          type: 'post',
          dataType: "json",
          data: {
            search: request.term
          },
          success: function(data) {
            response(data);
          }
        });
      },
      autoFocus: true
    });
  });
  </script>
  <input type='text' class="selector" />
  <div id="someElem"></div>
</body>

</html>

Options: appendTo

<!doctype html>
<html>
<head>
  <title>jQuery UI autocomplete with PHP and AJAX</title>
  <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
  <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
  <script src='jquery-ui.min.js' type='text/javascript'></script>
</head>
<body>
  <script type='text/javascript'>
  jQuery(document).ready(function($) {
    $(".selector").autocomplete({
      source: function(request, response) {
        $.ajax({
          url: "fetchData.php",
          type: 'post',
          dataType: "json",
          data: {
            search: request.term
          },
          success: function(data) {
            response(data);
          }
        });
      },
      appendTo: "#someElem"
    });
  });
  </script>
  <input type='text' class="selector" />
  <div id="someElem"></div>
</body>

</html>

Options: classes

<!doctype html>
<html>

<head>
  <title>jQuery UI autocomplete with PHP and AJAX</title>
  <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
  <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
  <script src='jquery-ui.min.js' type='text/javascript'></script>
</head>
<body>
  <script type='text/javascript'>
  jQuery(document).ready(function($) {
    $(".selector").autocomplete({
      source: function(request, response) {
        $.ajax({
          url: "fetchData.php",
          type: 'post',
          dataType: "json",
          data: {
            search: request.term
          },
          success: function(data) {
            response(data);
          }
        });
      },
      classes: {
        "ui-autocomplete": "highlight abc"
      }
    });
  });
  </script>
  <input type='text' class="selector" />
  <div id="someElem"></div>
</body>

</html>

Options: delay

Độ trễ tính bằng mili giây giữa khi tổ hợp phím xảy ra và khi tìm kiếm được thực hiện. Độ trễ bằng không có ý nghĩa đối với dữ liệu cục bộ (phản hồi nhanh hơn), nhưng có thể tạo ra nhiều tải cho dữ liệu từ xa, trong khi ít phản hồi hơn.

$( ".selector" ).autocomplete({
  delay: 500
});

Options: disabled

Vô hiệu hóa tự động hoàn thành nếu được đặt thành đúng.

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

Options: minLength

Số lượng ký tự tối thiểu mà người dùng phải nhập trước khi thực hiện tìm kiếm. Không hữu ích cho dữ liệu cục bộ chỉ với một vài mục, nhưng nên sử dụng giá trị cao hơn khi tìm kiếm một ký tự có thể khớp với vài nghìn mục.

$( ".selector" ).autocomplete({
  minLength: 1
});

Options: position

Default: { my: "left top", at: "left bottom", collision: "none" }

Xác định vị trí của menu gợi ý liên quan đến yếu tố đầu vào liên quan. Tùy chọn mặc định cho thành phần đầu vào, nhưng bạn có thể chỉ định một yếu tố khác để định vị. Bạn có thể tham khảo tiện ích Vị trí giao diện người dùng jQuery để biết thêm chi tiết về các tùy chọn khác nhau.

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

Options: source

Xác định dữ liệu để sử dụng, phải được chỉ định. Không phụ thuộc vào biến thể bạn sử dụng, nhãn luôn được coi là văn bản. Nếu bạn muốn nhãn được coi là html, bạn có thể sử dụng phần mở rộng html của Scott González. Tất cả các bản demo tập trung vào các biến thể khác nhau của tùy chọn nguồn - tìm kiếm một biến thể phù hợp với trường hợp sử dụng của bạn và kiểm tra mã.

Multiple types supported:

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]
An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

Thuộc tính nhãn được hiển thị trong menu gợi ý. Giá trị sẽ được chèn vào phần tử đầu vào khi người dùng chọn một mục. Nếu chỉ một thuộc tính được chỉ định, nó sẽ được sử dụng cho cả hai, ví dụ: nếu bạn chỉ cung cấp các thuộc tính giá trị, giá trị cũng sẽ được sử dụng làm nhãn

String: Khi một chuỗi được sử dụng, plugin Tự động hoàn thành mong muốn chuỗi đó trỏ đến tài nguyên URL sẽ trả về dữ liệu JSON. Nó có thể trên cùng một máy chủ hoặc trên một máy chủ khác (phải hỗ trợ CORS). Plugin Autocomplete không lọc kết quả, thay vào đó, một chuỗi truy vấn được thêm vào với một trường thuật ngữ, mà tập lệnh phía máy chủ nên sử dụng để lọc kết quả.

Ví dụ: nếu tùy chọn nguồn được đặt thành "http://example.com" và người dùng nhập foo, yêu cầu GET sẽ được gửi tới http://example.com?term=foo. Dữ liệu có thể có cùng định dạng với dữ liệu cục bộ được mô tả ở trên.

Function: Biến thể thứ ba, một cuộc gọi lại, cung cấp sự linh hoạt nhất và có thể được sử dụng để kết nối bất kỳ nguồn dữ liệu nào với Tự động hoàn thành, bao gồm JSONP. Cuộc gọi lại có hai đối số:

A request object, với một thuộc tính thuật ngữ duy nhất, tham chiếu đến giá trị hiện tại trong văn bản nhập. Ví dụ: nếu người dùng nhập "new yo" trong trường thành phố, thuật ngữ Tự động hoàn thành sẽ bằng "new yo".

A response callback, mà mong đợi một đối số duy nhất: dữ liệu để đề xuất cho người dùng. Dữ liệu này phải được lọc dựa trên thuật ngữ được cung cấp và có thể ở bất kỳ định dạng nào được mô tả ở trên đối với dữ liệu cục bộ đơn giản. Điều quan trọng khi cung cấp một cuộc gọi lại nguồn tùy chỉnh để xử lý lỗi trong khi yêu cầu. Bạn phải luôn gọi lại cuộc gọi lại ngay cả khi bạn gặp lỗi. Điều này đảm bảo rằng widget luôn có trạng thái chính xác.

Khi lọc dữ liệu cục bộ, bạn có thể sử dụng hàm $ .ui.autocomplete.escapeRegex tích hợp. Nó sẽ lấy một đối số chuỗi đơn và thoát tất cả các ký tự regex, làm cho kết quả an toàn để chuyển sang RegExp () mới.

Methods: close()

Closes the Autocomplete menu. Useful in combination with the search method, to close the open menu.

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

Methods: destroy()

Loại bỏ hoàn toàn chức năng tự động hoàn thành. Điều này sẽ đưa phần tử trở lại trạng thái trước khi khởi tạo.

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

Methods: disable()

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

Methods: enable()

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

Methods: instance()

Lấy đối tượng cá thể tự động hoàn thành. Nếu phần tử không có phiên bản liên quan, không xác định được trả về.

Không giống như các phương thức widget khác, instance () an toàn để gọi bất kỳ phần tử nào sau khi plugin tự động hoàn tất đã được tải.

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

Methods: option( optionName )

Nhận giá trị hiện được liên kết với tùy chọn Tên được chỉ định.

Lưu ý: Đối với các tùy chọn có các đối tượng là giá trị của chúng, bạn có thể nhận giá trị của một khóa cụ thể bằng cách sử dụng ký hiệu dấu chấm. Ví dụ: "foo.bar" sẽ nhận giá trị của thuộc tính thanh trên tùy chọn foo.

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );

Methods: option()

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

var options = $( ".selector" ).autocomplete( "option" );

Methods: option( optionName, value )

Đặt giá trị của tùy chọn tự động hoàn thành được liên kết với tùy chọn Tên được chỉ định.

Lưu ý: Đối với các tùy chọn có các đối tượng là giá trị của chúng, bạn có thể đặt giá trị của chỉ một thuộc tính bằng cách sử dụng ký hiệu dấu chấm cho tùy chọn Tên. Ví dụ: "foo.bar" sẽ chỉ cập nhật thuộc tính thanh của tùy chọn foo.

optionName: The name of the option to set.
value: A value to set for the option

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

Methods: option( options )

Sets one or more options for the autocomplete.

$( ".selector" ).autocomplete( "option", { disabled: true } );

Methods: search( [value ] )

Kích hoạt một sự kiện tìm kiếm và gọi nguồn dữ liệu nếu sự kiện không bị hủy. Có thể được sử dụng bởi một nút giống như hộp chọn để mở các đề xuất khi nhấp vào. Khi được gọi không có tham số, giá trị của đầu vào hiện tại được sử dụng. Có thể được gọi với một chuỗi rỗng và minLpm: 0 để hiển thị tất cả các mục.

$( ".selector" ).autocomplete( "search", "" );

Trả về một đối tượng jQuery chứa thành phần menu. Mặc dù các mục menu liên tục được tạo và hủy, phần tử menu được tạo trong quá trình khởi tạo và liên tục được sử dụng lại.

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

Extension Points:

Tiện ích tự động hoàn thành được xây dựng cùng với nhà máy phụ tùng và có thể được mở rộng. Khi mở rộng các 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ó. Các phương thức sau được cung cấp dưới dạng các điểm mở rộng có độ ổn định API giống như các phương thức plugin được liệt kê ở trên. Để biết thêm thông tin về tiện ích mở rộng tiện ích, hãy xem Mở rộng tiện ích với Nhà máy tiện ích.

Extension Points: _renderItem( ul, item )

Phương pháp kiểm soát việc tạo từng tùy chọn trong menu của widget. Phương thức phải tạo một phần tử mới, nối nó vào menu và trả lại nó. Xem tài liệu Menu để biết thêm chi tiết về đánh dấu

ul
The <ul> element that the newly created <li> element must be appended to.
item: 
    label (Type: String)
    value (Type: String)
The value to insert into the input when the item is selected.

_renderItem: function( ul, item ) {
  return $( "<li>" )
    .attr( "data-value", item.value )
    .append( item.label )
    .appendTo( ul );
}

Extension Points: _renderMenu( ul, items )

Phương pháp kiểm soát việc xây dựng menu của widget. Phương thức này được thông qua một trống và một mảng các mục khớp với thuật ngữ người dùng đã nhập. Việc tạo các phần tử riêng lẻ phải được ủy quyền cho _renderItemData (), lần lượt ủy nhiệm cho điểm mở rộng _renderItem ().

ul
Type: jQuery
An empty <ul> element to use as the widget's menu.
items
Type: Array
An Array of items that match the user typed term. Each item is an Object with label and value properties.

_renderMenu: function( ul, items ) {
  var that = this;
  $.each( items, function( index, item ) {
    that._renderItemData( ul, item );
  });
  $( ul ).find( "li:odd" ).addClass( "odd" );
}

Extension Points: _resizeMenu()

Phương pháp chịu trách nhiệm định cỡ menu trước khi nó được hiển thị. Phần tử menu có sẵn tại this.menu.element

_resizeMenu: function() {
  this.menu.element.outerWidth( 500 );
}

Events: change( event, ui )

Kích hoạt khi trường bị mờ, nếu giá trị đã thay đổi.

event
Type: Event
ui
Type: Object
item
Type: Object
The item selected from the menu, if any. Otherwise the property is null.
Các mục được chọn từ menu, nếu có. Nếu không tài sản là null.

$( ".selector" ).autocomplete({
  change: function( event, ui ) {}
});
Bind an event listener to the autocompletechange event:

$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );

Events: close( event, ui )

Triggered when the menu is hidden. Not every close event will be accompanied by a change event.

Kích hoạt khi menu bị ẩn. Không phải mọi sự kiện gần gũi sẽ được đi kèm với một sự kiện thay đổi.

Lưu ý: Đối tượng ui trống nhưng được bao gồm để thống nhất với các sự kiện khác.

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

Bind an event listener to the autocompleteclose event:

$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );

Events: create( event, ui )

Lưu ý: Đối tượng ui trống nhưng được bao gồm để thống nhất với các sự kiện khác.

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

Bind an event listener to the autocompletecreate event:

$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );

Events: create( event, ui )

Kích hoạt khi tự động hoàn thành được tạo.

Lưu ý: Đối tượng ui trống nhưng được bao gồm để thống nhất với các sự kiện khác.

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

Bind an event listener to the autocompletecreate event:

	$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );

Events: focus( event, ui )

Kích hoạt khi tiêu điểm được chuyển đến một mục (không chọn). Hành động mặc định là thay thế giá trị của trường văn bản bằng giá trị của mục được tập trung, mặc dù chỉ khi sự kiện được kích hoạt bởi tương tác bàn phím. Hủy bỏ sự kiện này sẽ ngăn giá trị được cập nhật, nhưng không ngăn mục menu bị tập trung.

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

Bind an event listener to the autocompletefocus event:

$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );

Events: open( event, ui )

Kích hoạt khi menu gợi ý được mở hoặc cập nhật.

Initialize the autocomplete with the open callback specified:

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

Bind an event listener to the autocompleteopen event:

$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );

Events: response( event, ui )

Kích hoạt sau khi tìm kiếm hoàn thành, trước khi menu được hiển thị. Hữu ích cho thao tác cục bộ của dữ liệu đề xuất, trong đó không yêu cầu gọi lại tùy chọn nguồn tùy chỉnh. 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ự động hoàn tất bị tắt.

event
Type: Event
ui
Type: Object
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ị. Dữ liệu này đã được chuẩn hóa, vì vậy nếu bạn sửa đổi dữ liệu, hãy đảm bảo bao gồm cả thuộc tính giá trị và nhãn cho từng mục.

Initialize the autocomplete with the response callback specified:

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

Bind an event listener to the autocompleteresponse event:

$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );

Events: search( event, ui )

Kích hoạt trước khi tìm kiếm được thực hiện, sau khi độ dài và độ trễ được đáp ứng. Nếu hủy bỏ, sau đó không có yêu cầu sẽ được bắt đầu và không có mục nào được đề xuất.

Initialize the autocomplete with the search callback specified:

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

Bind an event listener to the autocompletesearch event:

$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} );

Events: select( event, ui )

Kích hoạt khi một mục được chọn từ menu. Hành động mặc định là thay thế giá trị của trường văn bản bằng giá trị của mục được chọn. Hủy bỏ sự kiện này ngăn giá trị được cập nhật, nhưng không ngăn menu đóng.

event
Type: Event
ui
Type: Object
item
Type: Object
An Object with label and value properties for the selected option.

Initialize the autocomplete with the select callback specified:

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

Bind an event listener to the autocompleteselect event:

$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );

Ví dụ 1:

Using a custom source callback to match only the beginning of terms
Sử dụng một cuộc gọi lại nguồn tùy chỉnh để chỉ khớp với phần đầu của các điều khoản

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});
</script>
 
</body>
</html>

Ví dụ 2:

index.html

<!doctype html>
<html>

<head>
  <title>jQuery UI autocomplete with PHP and AJAX</title>
  <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
  <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
  <script src='jquery-ui.min.js' type='text/javascript'></script>
</head>

<body>
  <div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds">
  </div>
  <div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  </div>
  <script>
  jQuery(document).ready(function($) {
    $(function() {
      function log(message) {
        $("<div>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
      }
      $("#birds").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "search.php",
            dataType: "json",
            data: {
              term: request.term
            },
            success: function(data) {
              response(data);
            }
          });
        },
        minLength: 2,
        select: function(event, ui) {
          log("Selected: " + ui.item.value + " aka " + ui.item.id);
        }
      });
    });
  });
  </script>
</body>

</html>

search.php

<?php
$arr = array(
  [
    "id"=>"Branta canadensis",
    "label"=>"Greater Canada Goose",
    "value"=>"Greater Canada Goose",
  ],
  [
    "id"=>"Chlamydotis undulata",
    "label"=>"Houbara Bustard",
    "value"=>"Houbara Bustard",
  ],
  [
    "id"=>"Anser fabalis",
    "label"=>"Taiga Bean Goose",
    "value"=>"Taiga Bean Goose",
  ],
  [
    "id"=>"Anser serrirostris",
    "label"=>"Tundra Bean Goose",
    "value"=>"Tundra Bean Goose",
  ],
  [
    "id"=>"Anthus gustavi",
    "label"=>"Pechora Pipit",
    "value"=>"Pechora Pipit",
  ],
  [
    "id"=>"Branta hutchinsii",
    "label"=>"Lesser Canada Goose",
    "value"=>"Lesser Canada Goose",
  ],
  [
    "id"=>"Melanocorypha calandra",
    "label"=>"Calandra Lark",
    "value"=>"Calandra Lark",
  ],
  [
    "id"=>"Puffinus baroli",
    "label"=>"Madeira Little Shearwater",
    "value"=>"Madeira Little Shearwater",
  ]
);
echo json_encode($arr);
?>

PreviousTạo chức năng tự động hoàn tất nhập liệu với thư viện jQuery UI Autocomplete (Phần 1)NextJavaScript String split() Method (OK)

Last updated 4 years ago

Options: autoFocus

Options: appendTo

Options: classes

Options: delay

Options: disabled

Options: minLength

Options: position

Options: source

Methods: close()

Methods: destroy()

Methods: disable()

Methods: enable()

Methods: instance()

Methods: option( optionName )

Methods: option()

Methods: option( optionName, value )

Methods: option( options )

Methods: search( [value ] )

Methods: widget()

Extension Points:

Extension Points: _renderItem( ul, item )

Extension Points: _renderMenu( ul, items )

Extension Points: _resizeMenu()

Events: change( event, ui )

Events: close( event, ui )

Events: create( event, ui )

Events: create( event, ui )

Events: focus( event, ui )

Events: open( event, ui )

Events: response( event, ui )

Events: search( event, ui )

Events: select( event, ui )