تکمیل خودکار کلمه در PHP
تکمیل خودکار کلمه یا Auto-complete یکی از ویژگی‌های جذاب و کاربردی در توسعه وب است. این ویژگی به کاربران کمک می‌کند تا هنگام ورود اطلاعات، پیشنهاداتی را مشاهده کنند که به آنچه که تایپ می‌کنند، مرتبط است. در زبان PHP، می‌توان این قابلیت را با ترکیب HTML، CSS و JavaScript پیاده‌سازی کرد.
پیاده‌سازی ابتدایی
برای شروع، نیاز به یک فرم ساده داریم که کاربر بتواند متن را وارد کند. در این فرم، با استفاده از JavaScript و Ajax، می‌توان درخواست‌هایی به سرور ارسال کرد تا پیشنهادات مناسب را دریافت کنیم.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>تکمیل خودکار کلمه</title>
<script>
function autoComplete() {
const query = document.getElementById('search').value;
if (query.length > 2) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
document.getElementById('suggestions').innerHTML = this.responseText;
}
};
xhr.open("GET", "autocomplete.php?q=" + query, true);
xhr.send();
}
}
</script>
</head>
<body>
<input type="text" id="search" onkeyup="autoComplete()" placeholder="جستجو...">
<div id="suggestions"></div>
</body>
</html>
```
کد PHP برای دریافت پیشنهادات
در این کد، باید یک فایل PHP به نام `autocomplete.php` ایجاد کنیم که ورودی کاربر را دریافت کرده و پیشنهادات مرتبط را از یک پایگاه داده یا آرایه‌ای از کلمات بازگرداند.
```php
<?php
$q = $_GET['q'];
$suggestions = [];
$words = ['PHP', 'Python', 'Java', 'JavaScript', 'C++', 'C#', 'Ruby', 'HTML', 'CSS'];
foreach ($words as $word) {
if (stripos($word, $q) !== false) {
$suggestions[] = $word;
}
}
foreach ($suggestions as $suggestion) {
echo "<div>$suggestion</div>";
}
?>
```
نتیجه‌گیری
با این روش، کاربران هنگام تایپ کلمات، پیشنهادات مرتبط را مشاهده خواهند کرد. این ویژگی نه تنها تجربه کاربری را بهبود می‌بخشد، بلکه سرعت و دقت ورود اطلاعات را نیز افزایش می‌دهد. با توجه به نیازهای خاص پروژه، می‌توان این کد را گسترش داد و پیچیده‌تر کرد.
به یاد داشته باشید که امنیت و بهینه‌سازی کد نیز از اهمیت ویژه‌ای برخوردار است.
تکمیل خودکار کلمه در PHP
تکمیل خودکار کلمه (Autocomplete) یکی از قابلیت‌های جذاب و کاربردی در برنامه‌نویسی وب است که به کاربران کمک می‌کند هنگام تایپ در فرم‌ها یا فیلدهای جستجو، پیشنهادهای مرتبط و سریع دریافت کنند. در PHP، پیاده‌سازی این قابلیت معمولاً با ترکیب جاوااسکریپت (برای تعامل سمت کاربر) و PHP (برای پردازش سمت سرور) انجام می‌شود.
چطور تکمیل خودکار در PHP کار می‌کند؟
ابتدا کاربر شروع به نوشتن کلمه یا عبارت می‌کند. سپس، با هر بار تایپ، یک درخواست (request) به سرور ارسال می‌شود. سرور (با استفاده از PHP) این درخواست را می‌گیرد، داده‌ها را از پایگاه داده یا منابع دیگر جستجو می‌کند و نتایج مشابه را برمی‌گرداند. جاوااسکریپت در سمت کاربر این نتایج را دریافت کرده و نمایش می‌دهد. این تعامل، باعث می‌شود تجربه کاربری بسیار روان‌تر و سریع‌تر شود.
گام‌های اصلی پیاده‌سازی
- ایجاد فرم ورودی: یک فیلد متنی با id مشخص در HTML قرار می‌گیرد.
- کدنویسی جاوااسکریپت: با استفاده از AJAX، هر بار کاربر تایپ می‌کند، درخواست به سرور ارسال شود بدون بارگذاری مجدد صفحه.
- کدنویسی PHP: در سمت سرور، PHP ورودی کاربر را دریافت می‌کند، در پایگاه داده جستجو می‌کند و داده‌های مرتبط را به صورت JSON یا متن ساده برمی‌گرداند.
- نمایش نتایج: جاوااسکریپت نتایج را به صورت لیستی زیر فیلد متنی نشان می‌دهد.
نکات مهم در پیاده‌سازی
- امنیت: حتماً ورودی کاربر را فیلتر و ایمن کنید تا از حملات SQL Injection جلوگیری شود.
- بهینه‌سازی: داده‌های پایگاه داده بهتر است ایندکس شده باشند تا جستجو سریع انجام شود.
- واکنش‌گرایی: پاسخ سرور باید سریع باشد تا حس تأخیر به کاربر منتقل نشود.
- کاربرپسندی: نمایش نتایج باید واضح و قابل انتخاب باشد.
نمونه کد ساده PHP و AJAX
```php
// autocomplete.php
if (isset($_GET['term'])) {
$term = $_GET['term'];
// اتصال به دیتابیس
$conn = new mysqli('localhost', 'user', 'pass', 'dbname');
$term = $conn->real_escape_string($term);
$sql = "SELECT name FROM users WHERE name LIKE '%$term%' LIMIT 10";
$result = $conn->query($sql);
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row['name'];
}
echo json_encode($data);
}
```
و در سمت جاوااسکریپت:
```js
document.getElementById('search').addEventListener('input', function() {
let term = this.value;
if (term.length < 2) return;
fetch('autocomplete.php?term=' + term)
.then(response => response.json())
.then(data => {
// نمایش لیست نتایج
let list = document.getElementById('autocomplete-list');
list.innerHTML = '';
data.forEach(item => {
let div = document.createElement('div');
div.textContent = item;
list.appendChild(div);
});
});
});
```
