ساخت AUTO COMPLETE با PHP و jQuery
Auto complete یک ویژگی مفید است که به کاربران کمک می‌کند تا با شروع به نوشتن، پیشنهادات مناسب را دریافت کنند. این ویژگی معمولاً در فرم‌های جستجو و ورودی‌های متنی استفاده می‌شود.
مراحل ساخت
۱. ایجاد پایگاه داده
اولین قدم ایجاد یک پایگاه داده است. فرض کنید شما یک پایگاه داده به نام `autocomplete_db` دارید و یک جدول به نام `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'), ('Banana'), ('Cherry'), ('Date'), ('Fig'), ('Grape');
```
۲. ایجاد فایل PHP
یک فایل PHP به نام `search.php` ایجاد کنید که شامل کد زیر باشد:
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "autocomplete_db";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (isset($_GET['query'])) {
$query = $conn->real_escape_string($_GET['query']);
$sql = "SELECT name FROM items WHERE name LIKE '%$query%'";
$result = $conn->query($sql);
$suggestions = [];
while ($row = $result->fetch_assoc()) {
$suggestions[] = $row['name'];
}
echo json_encode($suggestions);
}
$conn->close();
?>
```
این کد داده‌های موجود را بر اساس ورودی کاربر جستجو می‌کند و نتایج را به صورت JSON بازمی‌گرداند.
۳. ایجاد فایل HTML و jQuery
حالا فایل HTML را با jQuery ایجاد کنید:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Auto Complete Example</title>
<script src="https://code.jquery.com/jquery-
- 6.0.min.js"></script>
/* CSS برای استایل دادن به پیشنهادات */
.suggestions {
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
display: none;
}
.suggestion-item {
padding: 10px;
cursor: pointer;
}
.suggestion-item:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<input type="text" id="search" placeholder="جستجو کنید...">
<div class="suggestions" id="suggestions"></div>
<script>
$(document).ready(function(){
$("#search").on("keyup", function() {
let query = $(this).val();
if (query.length > 0) {
$.ajax({
url: "search.php",
method: "GET",
data: { query: query },
dataType: "json",
success: function(data) {
let suggestions = $("#suggestions");
suggestions.empty();
if (data.length > 0) {
suggestions.show();
data.forEach(function(item) {
suggestions.append(`<div class="suggestion-item">${item}</div>`);
});
} else {
suggestions.hide();
}
}
});
} else {
$("#suggestions").hide();
}
});
$(document).on("click", ".suggestion-item", function() {
$("#search").val($(this).text());
$("#suggestions").hide();
});
});
</script>
</body>
</html>
```
نتیجه‌گیری
با این مراحل ساده، شما یک سیستم auto complete کاربردی با استفاده از PHP و jQuery ایجاد کرده‌اید. این سیستم به کاربران اجازه می‌دهد تا به راحتی و سریع‌تر جستجو کنند. امید است این راهنما به شما کمک کرده باشد!
