ساخت 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 توصیه می‌شود.
ساخت فرم autocomplete در PHP
در این مقاله، قصد دارم به طور کامل و جامع درباره ساختن یک سیستم autocomplete در PHP صحبت کنم. autocomplete یا پیشنهادهای خودکار، یکی از ویژگی‌های مهم در فرم‌های وب است که به کاربران کمک می‌کند سریع‌تر و دقیق‌تر اطلاعات وارد کنند. این قابلیت معمولاً با ترکیب PHP، JavaScript و AJAX پیاده‌سازی می‌شود. پس، بیایید گام به گام شروع کنیم.
مقدمات و نیازمندی‌ها
ابتدا، نیاز دارید به یک سرور محلی یا میزبان وب که PHP پشتیبانی کند. همچنین، برای تعامل بهتر، باید با JavaScript و AJAX آشنا باشید. فرض بر این است که یک پایگاه داده MySQL دارید که اطلاعات مورد نیاز برای پیشنهادها در آن ذخیره شده است.
ایجاد پایگاه داده و جدول
برای شروع، یک پایگاه داده ساده ایجاد می‌کنیم. فرض کنید جدول ما نام دارد و فیلد موردنظر ما نام کاربر است.
```sql
CREATE DATABASE autocomplete_db;
USE autocomplete_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL
);
```
حالا، چند داده نمونه وارد می‌کنیم:
```sql
INSERT INTO users (name) VALUES ('Ali'), ('Amir'), ('Amin'), ('Sara'), ('Sahar'), ('Sara Jane');
```
ساخت فرم HTML
در مرحله بعد، یک فرم ساده در فایل HTML می‌سازیم که ورودی متن دارد و هنگام تایپ، پیشنهادها را نشان می‌دهد.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>Autocomplete PHP</title>
</head>
<body>
<h2>جستجو بر اساس نام کاربر</h2>
<input type="text" id="search" placeholder="نام کاربر را وارد کنید..." />
<div id="suggestions"></div>
<script src="https://code.jquery.com/jquery-
- 6.0.min.js"></script>
$(document).ready(function() {
$('#search').on('keyup', function() {
var query = $(this).val();
if (query.length > 0) {
$.ajax({
url: 'search.php',
method: 'POST',
data: {search: query},
success: function(data) {
$('#suggestions').html(data);
}
});
} else {
$('#suggestions').empty();
}
});
});
</script>
</body>
</html>
```
در این قسمت، هرگاه کاربر شروع به تایپ کند، AJAX درخواست به فایل `search.php` ارسال می‌شود و نتایج دریافت شده در بخش `div` نمایش داده می‌شود.
ایجاد فایل `search.php`
حالا، باید فایل `search.php` را بنویسیم. این فایل وظیفه دارد درخواست‌های AJAX را پردازش کند و نتایج را برگرداند.
```php
<?php
// اتصال به دیتابیس
$conn = new mysqli('localhost', 'your_username', 'your_password', 'autocomplete_db');
if ($conn->connect_error) {
die('اتصال به دیتابیس برقرار نشد: ' . $conn->connect_error);
}
if (isset($_POST['search'])) {
$search = $conn->real_escape_string($_POST['search']);
// کوئری برای دریافت نام‌های مطابق با ورودی کاربر
$sql = "SELECT name FROM users WHERE name LIKE '%$search%' LIMIT 5";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo '<div class="suggestion">' . htmlspecialchars($row['name']) . '</div>';
}
} else {
echo '<div class="suggestion">موردی یافت نشد</div>';
}
}
?>
```
در اینجا، توجه داشته باشید که باید مقادیر `'your_username'` و `'your_password'` را به اطلاعات واقعی سرور خود تغییر دهید. این فایل، داده‌های پیشنهادی را برمی‌گرداند و در صورت نبود نتیجه، پیام مناسب نشان می‌دهد.
نمایش پیشنهادها
برای بهتر دیده شدن، می‌توانید استایل CSS هم اضافه کنید:
```css
#suggestions {
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
}
.suggestion {
padding: 8px;
cursor: pointer;
}
.suggestion:hover {
background-color: #f0f0f0;
}
```
نکات مهم و پیشرفته‌تر
- انتخاب پیشنهاد: می‌توانید با افزودن رویداد کلیک روی هر پیشنهاد، آن را به داخل ورودی منتقل کنید.
- بهبود سرعت: در صورت حجم زیاد داده‌ها، از ایندکس‌های مناسب در پایگاه داده استفاده کنید.
- امنیت: همیشه از `real_escape_string` یا Prepared Statements برای جلوگیری از SQL Injection استفاده کنید.
- کاهش درخواست‌ها: با افزودن تایمر debounce در JavaScript، درخواست‌های غیرضروری کاهش می‌یابد.
در نتیجه، این روش، یک سیستم autocomplete ساده و کارآمد است که می‌تواند در پروژه‌های مختلف به کار گرفته شود. با کمی خلاقیت و افزودن امکانات، می‌توانید قابلیت‌های پیشرفته‌تری برای آن بسازید، مثلا، اضافه کردن پیشنهادهای چندکلمه‌ای، دسته‌بندی نتایج، یا حتی استفاده از APIهای خارجی.
امیدوارم این راهنمای جامع، بتواند در پروژه‌های شما مفید باشد و به راحتی بتوانید autocomplete دلخواهتان را بسازید. در صورت نیاز به سوال یا مشکل، من در خدمتم!
