Lập trình PHP

jQuery AJAX AutoComplete với tính năng tạo mới – PHP

Posted on by Mss. Bình

Tính năng hộp văn bản tự động hoàn thành hiển thị danh sách gợi ý khi người dùng nhập một giá trị. Theo một cách nào đó, các đề xuất có liên quan đến từ khóa đã nhập.

Ví dụ: khi nhập vào hộp tìm kiếm của Google, nó sẽ hiển thị các từ khóa được đề xuất tự động trong danh sách thả xuống.

Hướng dẫn này sẽ chỉ ra cách thêm tính năng này vào một trang web. Mã này sử dụng thư viện JQuery với PHP và MySQL để hiển thị đề xuất tự động động khi nhập khóa tìm kiếm.

Nó cho phép gõ chữ cái bắt đầu của tên quốc gia để được gợi ý với danh sách tên quốc gia tương ứng. Xem mã được liên kết để bật tự động hoàn thành bằng thư viện jQuery-Ui.

Điểm đặc biệt của ví dụ này là nó cũng cho phép thêm một tùy chọn mới không có trong danh sách gợi ý.

tự động hoàn thành jquery ajax tạo mới

Khi nhập phím, một hàm sẽ thực thi tập lệnh Jquery Autocomplete. Nó đọc các đề xuất dựa trên giá trị đã nhập. Trình xử lý sự kiện này là một hàm AJAX. Nó yêu cầu PHP cho danh sách các quốc gia liên quan từ cơ sở dữ liệu.

Khi gửi một quốc gia mới, PHP sẽ cập nhật cơ sở dữ liệu. Sau đó, tùy chọn mới này sẽ xuất hiện từ lần tiếp theo trở đi.

Các bước để có trường tự động hoàn thành với tùy chọn tạo mới

  1. Tạo HTML với trường tự động hoàn thành.
  2. Tích hợp thư viện jQuery và khởi tạo autocomplete cho trường.
  3. Tạo một nguồn dữ liệu ngoài (cơ sở dữ liệu tại đây) để hiển thị các đề xuất.
  4. Tìm nạp các đề xuất tự động hoàn thành từ cơ sở dữ liệu bằng PHP.
  5. Chèn một tùy chọn vừa tạo vào cơ sở dữ liệu.

1. Tạo HTML với trường tự động điền

HTML này dùng để tạo trường tìm kiếm tự động hoàn thành trong một biểu mẫu. Đó là một hộp gợi ý hiển thị các đề xuất tự động động thông qua AJAX.

Trong sự kiện key-up của trường đầu vào này, tập lệnh AJAX sẽ gửi yêu cầu tới PHP. Tìm kiếm PHP thực hiện tìm nạp cơ sở dữ liệu về từ khóa đã nhập.

Biểu mẫu HTML này cũng đăng dữ liệu không được chọn từ các đề xuất. Tính năng này cho phép thêm các tùy chọn mới vào nguồn gợi ý tìm kiếm.

index.php

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href=" />
</head>
<body>
	<div class="outer-container">
		<div class="row">
			<form id="addCountryForm" autocomplete="off" method="post">
				<div Class="input-row">
					<label for="countryName">Country Name:</label><input type="text"
						id="countryName" name="countryName" required>
					<div id="countryList"></div>
				</div>
				<input type="submit" class="submit-btn" value="Save Country">
				<div id="message"></div>
			</form>
		</div>
	</div>
</body>
</html>

2. Tích hợp thư viện jQuery và khởi tạo autocomplete cho trường

Mã này sử dụng AJAX để hiển thị danh sách thả xuống tự động hoàn thành động. Tập lệnh này gửi đầu vào của người dùng đến điểm cuối PHP.

Trong cuộc gọi lại thành công, tập lệnh AJAX ghi lại phản hồi và cập nhật các đề xuất tự động trong giao diện người dùng. Điều này xảy ra trong sự kiện mở khóa.

Có thể chọn các tùy chọn được đề xuất. Hộp nhập liệu sẽ được lấp đầy với tùy chọn đã chọn khi nhấp vào từng tùy chọn.

Sau đó, đầu vào biểu mẫu được đăng lên PHP thông qua AJAX trong sự kiện gửi biểu mẫu.

Tập lệnh jQuery này hiển thị hiệu ứng làm mờ dần để hiển thị và ẩn danh sách thả xuống tự động hoàn thành trong giao diện người dùng.

index.php(tập lệnh ajax)

$(document).ready(function() {
	$('#countryName').keyup(function() {
		var query = $(this).val();
		if (query != '') {
			$.ajax({
				url: 'searchCountry.php',
				type: 'POST',
				data: {
					query: query
				},
				success: function(response) {
					$('#countryList').fadeIn();
					$('#countryList').html(response);
				}
			});
		} else {
			$('#countryList').fadeOut();
			$('#countryList').html('');
		}
	});

	$(document).on('click', 'li', function() {
		$('#countryName').val($(this).text());
		$('#countryList').fadeOut();
	});

	$('#addCountryForm').submit(function(event) {
		event.preventDefault();
		var countryName = $('#countryName').val();
		$.ajax({
			type: 'POST',
			url: 'addCountry.php',
			data: {
				countryName: countryName
			},
			success: function(response) {
				$('#countryList').hide();
				$('#message').html(response).show();
			}
		});
	});
});

3. Tạo nguồn dữ liệu ngoài (cơ sở dữ liệu tại đây) để hiển thị các đề xuất

Nhập SQL này để tạo vào cấu trúc cơ sở dữ liệu để lưu các đề xuất tự động hoàn thành. Nó có một số dữ liệu ban đầu giúp hiểu mã tự động hoàn thành trong quá trình thực thi.

cơ sở dữ liệu.sql

CREATE TABLE IF NOT EXISTS `democountries` (
`id` int NOT NULL AUTO_INCREMENT,
  `countryname` varchar(255) NOT NULL,
    PRIMARY KEY (id)
);

INSERT INTO `democountries` (`countryname`) VALUES
('Afghanistan'),
('Albania'),
('Bahamas'),
('Bahrain'),
('Cambodia'),
('Cameroon'),
('Denmark'),
('Djibouti'),
('East Timor'),
('Ecuador'),
('Falkland Islands (Malvinas)'),
('Faroe Islands'),
('Gabon'),
('Gambia'),
('Haiti'),
('Heard and Mc Donald Islands'),
('Iceland'),
('India'),
('Jamaica'),
('Japan'),
('Kenya'),
('Kiribati'),
('Lao Peoples Democratic Republic'),
('Latvia'),
('Macau'),
('Macedonia');

4. Tìm nạp các đề xuất tự động hoàn thành từ cơ sở dữ liệu bằng PHP

Mã PHP chuẩn bị truy vấn chọn MySQL để tìm nạp các đề xuất dựa trên từ khóa tìm kiếm.

Nó tìm nạp các bản ghi bằng cách tìm kiếm tên quốc gia bắt đầu bằng từ khóa được gửi qua AJAX.

Điểm cuối này xây dựng danh sách HTML các đề xuất tự động hoàn thành. Phản hồi HTML này được sử dụng để cập nhật giao diện người dùng nhằm hiển thị các đề xuất có liên quan.

searchCountry.php

<?php
$conn = new mysqli('localhost', 'root', '', 'db_autocomplete');

if (isset($_POST['query'])) {
    $query = "{$_POST['query']}%";
    $stmt = $conn->prepare("SELECT countryname FROM democountries WHERE countryname LIKE ? ORDER BY countryname ASC");
    $stmt->bind_param("s", $query);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo '<li>' . $row['countryname'] . '</li>';
        }
    }
}
?>

5. Chèn tùy chọn vừa tạo vào cơ sở dữ liệu

Giá trị dự kiến ​​không có trong cơ sở dữ liệu nếu không tìm thấy kết quả cho từ khóa đã nhập. Mã này cho phép bạn cập nhật nguồn hiện có với tùy chọn mới của mình.

Biểu mẫu gửi hành động gọi tập lệnh PHP bên dưới. Nó kiểm tra xem tên quốc gia được gửi bởi biểu mẫu AJAX có tồn tại trong cơ sở dữ liệu hay không. Nếu không, nó sẽ chèn tên quốc gia mới đó.

Sau phần chèn này, mục mới được thêm vào có thể được nhìn thấy trong hộp gợi ý trong tìm kiếm tự động hoàn thành tiếp theo.

addCountry.php

<?php
$conn = new mysqli('localhost', 'root', '', 'db_autocomplete');

if (isset($_POST['countryName'])) {
    $countryName = "{$_POST['countryName']}";
    $stmt = $conn->prepare("SELECT * FROM democountries WHERE countryname =?");
    $stmt->bind_param("s", $countryName);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        echo '<p>Country Selected: ' . $countryName . '</p>';
    } else {
        $stmt = $conn->prepare("INSERT INTO democountries (countryname) VALUES (?)");
        $stmt->bind_param("s", $countryName);
        $stmt->execute();
        $result = $stmt->insert_id;
        if (! empty($result)) {
            echo $countryName . ' saved to the country database.</br>';
        } else {
            echo '<p>Error adding ' . $countryName . ' to the database: ' . mysqli_error($conn) . '</p>';
        }
    }
}
?>

Các thư viện khác nhau cung cấp tính năng Autocomplete

Trong tập lệnh này, tôi đưa ra giải pháp tự động hoàn thành tùy chỉnh. Tuy nhiên, nhiều thư viện có sẵn để cung cấp tiện ích tự động hoàn thành được đóng gói tính năng nâng cao cho ứng dụng của bạn.

  1. Các jQueryUI cung cấp tính năng tự động hoàn thành để kích hoạt một trường HTML.
  2. Một thư viện nữa là Plugin tự động hoàn thành jQuery thu thập nhiều dữ liệu hơn từ các tùy chọn được chọn.

Các thư viện này cung cấp các tính năng bổ sung liên quan đến giải pháp tự động hoàn thành.

  1. Nó cho phép chọn một và nhiều giá trị từ danh sách thả xuống tự động hoàn thành.
  2. Nó đọc chỉ mục tùy chọn hoặc cặp khóa-giá trị của mục đã chọn từ danh sách.

Ưu điểm của tự động điền

Hầu hết chúng ta đều trải nghiệm những lợi ích của tính năng tự động hoàn thành. Tuy nhiên, danh sách này đề cập đến những ưu điểm của tính năng giao diện người dùng cần thiết này.

  1. Đây là một trong những tiện ích giao diện người dùng tiết kiệm thời gian hàng đầu giúp người dùng không phải gõ toàn bộ tùy chọn.
  2. Thật dễ dàng để tìm kiếm và nhận kết quả của bạn bằng cách đưa vào danh sách rút gọn và thu hẹp. Điều này giống như cách tính năng tìm kiếm của bảng dữ liệu thu hẹp tập kết quả.
  3. Nó giúp để có được các tìm kiếm có liên quan.

Tải xuống

↑ Quay lại Đầu trang


Xem thêm tin mới và bổ ích tại:

– Kiến thức gia đình

– Tri thức đời sống

– Kênh youtube Kiến thức gia đình