jQuery UI Autocomplete - Default functionality

# 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 1) Hàng ngày, các bạn thường sử dụng Google để tìm kiếm thông tin, và khi các bạn gõ bất kì từ khóa nào thì Google sẽ tự động liệt kê danh sách những cụm từ có nghĩa tương đồng với từ khóa đó ở bên dưới để gợi ý cho các bạn. Điều này sẽ giúp các bạn rút ngắn thời gian gõ toàn bộ từ khoá, đồng thời cũng giúp các bạn nhập vào chính xác từ khóa cần tìm hơn. Đây là một chức năng hay mà các website thường sử dụng và để thực hiện được chức năng này tôi giới thiệu với các bạn thư viện jQuery UI Autocomplete trong bộ thư viện jQuery UI.\ \ Để sử dụng thư viện jQuery UI các bạn cần phải tích hợp thư viện jQuery. Các bạn tải thư viện jQuery tại địa chỉ . Ngoài ra, trong gói thư viện jQuery UI cũng đã có sẵn thư viện jQuery để các bạn tích hợp.\ \ Các bạn tải gói thư viện jQuery UI tại địa chỉ . Tại trang tải thư viện, các bạn có thể chọn các thành phần mà các bạn cần dùng cũng như chọn mẫu giao diện các bạn muốn sử dụng, với bài viết này thì tôi chỉ sử dụng duy nhất thành phần Autocomplete.\ \ Các bạn tích hợp thư viện jQuery UI vào website với nội dung mã lệnh như sau:\ HTML: ``` ``` Và cài đặt thư viện jQuery UI Autocomplete với nội dung mã lệnh như sau:\ JavaScript: ``` $(function() { $('#autocomplete').autocomplete({ source: ['One', 'Two', 'Three'] }); }); ``` Sau đó để áp dụng tự động hoàn tất nhập liệu với trường nào đó các bạn tham khảo ví dụ sau:\ HTML: ``` ``` Các bạn có thể tìm hiểu thêm về thư viện jQuery UI Autocomplete tại địa chỉ . ``` jQuery UI Autocomplete - Default functionality

Tags:

``` Ví dụ 1: {% embed url="" %} ``` Demo ``` {% embed url="" %} ``` setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $conn->prepare('SELECT country FROM countries WHERE country LIKE :term'); $stmt->execute(array('term' => '%' . $_GET['term'] . '%')); while ($row = $stmt->fetch()) { $return_arr[] = $row['country']; } } catch (PDOException $e) { echo 'ERROR: ' . $e->getMessage(); } echo json_encode($return_arr); } ?> ``` {% file src="" %} Ví dụ 2: index.php ``` Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax

Search Country:

``` {% embed url="" %} ``` prepare("SELECT * FROM tbl_country WHERE country_name LIKE ?"); $sql->bind_param("s", $search_param); $sql->execute(); $result = $sql->get_result(); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $countryResult[] = $row["country_name"]; } echo json_encode($countryResult); } $conn->close(); ?> ``` {% file src="" %} Ví dụ 3: index.html ``` jQuery UI autocomplete with PHP and AJAX

Single selection
Selected User id
Multiple Selection
Selected User ids

``` {% embed url="" %} ``` " %} ``` $row['id'], "label" => $row['name']); } echo json_encode($response); } exit; ``` {% file src="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://javascriptuse.gitbook.io/javascript/tao-chuc-nang-tu-dong-hoan-tat-nhap-lieu-voi-thu-vien-jquery-ui-autocomplete.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.