ساخت AUTOCOMPLETE در PHP
در دنیای وب، قابلیت autocomplete یا تکمیل خودکار، تجربه کاربری را به شدت بهبود می‌بخشد. این ویژگی به کاربران کمک می‌کند تا با تایپ کردن چند حرف، پیشنهاداتی را مشاهده کنند که آن‌ها را در انتخاب سریع‌تر یاری می‌دهد. در اینجا، به نحوه پیاده‌سازی autocomplete در PHP خواهیم پرداخت.
۱. طراحی پایگاه داده
ابتدا، نیاز به یک پایگاه داده داریم. فرض کنید پایگاه داده‌ای داریم به نام `my_database` و جدولی به نام `items` که شامل دو فیلد `id` و `name` است.
```sql
CREATE TABLE items (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL
);
```
۲. پر کردن پایگاه داده
سپس می‌توانید داده‌هایی را به جدول اضافه کنید. مثلاً نام میوه‌ها:
```sql
INSERT INTO items (name) VALUES ('Apple'), ('Orange'), ('Banana'), ('Grapes'), ('Peach');
```
۳. ایجاد فرم HTML
حالا وقت آن است که یک فرم ساده HTML بسازید. این فرم شامل یک فیلد ورودی برای تایپ کاربر است.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Autocomplete Example</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Autocomplete در PHP</h1>
<input type="text" id="search" placeholder="جستجو..." onkeyup="fetchSuggestions(this.value)">
<div id="suggestions"></div>
</body>
</html>
```
۴. نوشتن کد JavaScript
برای اینکه پیشنهادات به صورت پویا نمایش داده شوند، به JavaScript نیاز داریم. تابع `fetchSuggestions` را به این صورت ایجاد کنید:
```javascript
function fetchSuggestions(query) {
if (query.length < 1) {
document.getElementById("suggestions").innerHTML = "";
return;
}
const xhr = new XMLHttpRequest();
xhr.open("GET", "fetch.php?q=" + query, true);
xhr.onload = function () {
if (this.status === 200) {
document.getElementById("suggestions").innerHTML = this.responseText;
}
};
xhr.send();
}
```
۵. نوشتن کد PHP
حالا به سراغ کد PHP می‌رویم. فایل `fetch.php` را به اینصورت ایجاد کنید:
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "my_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$query = $_GET['q'];
$sql = "SELECT name FROM items WHERE name LIKE '%$query%'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<div>" . $row['name'] . "</div>";
}
} else {
echo "هیچ پیشنهادی یافت نشد.";
}
$conn->close();
?>
```
۶. نتیجه‌گیری
با این مراحل، شما یک سیستم autocomplete ساده با PHP و JavaScript ایجاد کرده‌اید. این پروژه می‌تواند به راحتی گسترش یابد و بهبود یابد. شما می‌توانید به جای جستجوی نام میوه‌ها، هر نوع داده‌ای را جستجو کنید.
به یاد داشته باشید که امنیت را فراموش نکنید! استفاده از prepared statements در PHP برای جلوگیری از SQL injection توصیه می‌شود.
