Code Autocomplete sử dụng cho các biểu mẫu thông tin thành viên

Chia sẻ mã nguồn và kinh nghiệm lập trình PHP, JavaScript, jQuery,...
Nội quy chuyên mục
Thành viên đăng quảng cáo trong chuyên mục này sẽ bị xóa toàn bộ bài viết và cấm vĩnh viễn tham gia Diễn đàn.

* Xem qui định đăng bài viết tại đây: Nội quy đăng bài viết
Đăng trả lời
FreeCode
Thành viên mới
Thành viên mới
Bài viết:9
Ngày tham gia:10/11/2019 - 15:28

Code Autocomplete sử dụng cho các biểu mẫu thông tin thành viên

Gửi bài gửi bởi FreeCode » 29/12/2019 - 13:58

Code Autocomplete sử dụng cho các biểu mẫu thông tin thành viên

code-autocomplete-buaxua.jpg
code-autocomplete-buaxua.jpg (24.15KiB)Đã xem 5278 lần

Các tính năng chính:

- Tự động hiển thị danh sách Họ Tên khi nhập các ký tự đại diện.
- Tự động hiển thị các thông tin khác như Địa chỉ Email, Điện thoại,... tương ứng với tên đã chọn
- Các dữ liệu được lấy từ Database.
- Sử dụng thư viện jQuery
- Cho phép thay đổi các thiết lập.

Các bước thực hiện nhứ sau:

1. Tạo Database

Trước tiên bạn cần tạo Database với bảng dữ liệu có cấu trúc như sau:

Mã: Chọn tất cả

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `phone` varchar(24) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `users` (`id`, `name`, `email`, `phone`) VALUES
(1, 'Trần A', 'trana@email.com', '56973317'),
(2, 'Nguyễn B', 'nguyenb@email.com', '40378541'),
(3, 'Lý C', 'lyc@email.com', '34614899'),
(4, 'Ngô D', 'ngod@email.com', '13014383'),
(5, 'Đào Đ', 'daod@email.com', '52154191'),
(6, 'Lê E', 'lee@email.com', '58765281'),
(7, 'Vũ G', 'vug@email.com', '11753471'),
(8, 'Nguyễn H', 'nguyenh@email.com', '33989432'),
(9, 'Lê K', 'lek@email.com', '56539890'),
(10, 'Trần M', 'tranm@email.com', '83788228'),
(11, 'Ngô P', 'ngop@email.com', '76438908'),
(12, 'Trần T', 'trant@doe.com', '47648224');
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `email` (`email`),
  ADD KEY `name` (`name`);
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21; 
Xem hướng dẫn cách tạo Database bằng phpMyAdmin trên localhost:
https://www.buaxua.vn/thiet-ke-web/cach ... -localhost
2. Tạo tập tin mã nguồn php để truy xuất dữ liệu từ Databse

Kế tiếp bạn tạo tập tin có tên là search.php với nội dung như sau:

Mã: Chọn tất cả

<?php
$host = 'localhost';
$dbname = 'tên_database';
$user = 'root';
$password = '';
$charset = 'utf8';
$pdo = new PDO(
	"mysql:host=$host;dbname=$dbname;charset=$charset", $user, $password, [
		PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
		PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
		PDO::ATTR_EMULATE_PREPARES => false,
	]
);
$data = [];
switch ($_POST['type']) {
  default :
    break;
  case "user-all":
    // Data yoga
    $data = [
      "display" => [],
      "details" => []
    ];
    $stmt = $pdo->prepare("SELECT * FROM `users` WHERE `name` LIKE ?");
    $stmt->execute(["%" . $_POST['term'] . "%"]);
    while ($row = $stmt->fetch(PDO::FETCH_NAMED)) {
      $data["display"][] = [
        "label" => $row['name'],
        "value" => $row['id']
      ];
      $data["details"][$row['id']] = [
        "email" => $row['email'],
        "phone" => $row['phone']
      ];
    }
    break;
}
$pdo = null;
echo json_encode($data);
?>
3. Tạo tập tin mã nguồn HTML để chạy thử code

Cuối cùng, bạn tạo tập tin có tên là test.html với nội dung như sau:

Mã: Chọn tất cả

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
    <title>
      Autocomplete Demo
    </title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
      var actemp = null;
      $(function () {
        $('#user-name').autocomplete({
          source: function (request, response) {
            $.ajax({
              type: "POST",
              url: "search.php",
              data: {
                term: request.term,
                type: "user-all"
              },
              success: function(data) {
                actemp = data.details;
                response(data.display);
              },
              dataType: 'json',
              minLength: 2,
              delay: 100
            });
          },
          select : function(event, ui){
            $('#user-name').val(ui.item.label);
            $('#user-email').val(actemp[ui.item.value]['email']);
            $('#user-tel').val(actemp[ui.item.value]['phone']);
            return false;
          }
        });
      });
    </script>
  </head>
  <body>
    Họ Tên: <input type="text" id="user-name"/>
    <br/><br/>
    Địa chỉ Email: <input type="email" id="user-email"/>
    <br/><br/>
    Điện thoại: <input type="tel" id="user-tel"/>
  </body>
</html>
Đặt các tập tin này chung trong một thư mục và chạy tập tin test.html

Lưu ý là code này phải chạy trên máy chủ web có cài đặt PHP.
Xem hướng dẫn cách tạo máy chủ web trên localhost:
https://www.buaxua.vn/tu-khoa/may-chu-web


Đây là code cơ bản, tùy theo nhu cầu sử dụng mà các bạn thay đổi hoặc phát triển thêm.

Đăng trả lời
  • Các chủ đề liên quan
    Trả lời
    Xem
    Bài viết mới nhất

Quay về