تگ های موضوع ساخت در

اسکریپت تکمیل کننده کلمه در زمان نوشتن با گوگل با جاوااسکریپت و PHP

دانلود - Download

توضیحات بیشتر

ساخت 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>

مشاهده بيشتر