ساخت 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 ایجاد کرده‌اید. این سیستم به کاربران اجازه می‌دهد تا به راحتی و سریع‌تر جستجو کنند. امید است این راهنما به شما کمک کرده باشد!
ساخت Auto Complete با PHP و jQuery: راهنمای جامع و کامل
در این مقاله، قصد دارم شما را با فرآیند ساخت یک سیستم Auto Complete (پیشنهاد خودکار) در صفحات وب با استفاده از PHP و jQuery آشنا کنم. این روش، به کاربران کمک می‌کند تا هنگام تایپ کردن، پیشنهادهای مرتبط و مفید دریافت کنند، که در نتیجه تجربه کاربری بهتر و فرآیند ورودی سریع‌تر می‌شود.
بخش اول: مفاهیم اولیه و نیازمندی‌ها
قبل از شروع، باید بدانید که این سیستم، ترکیبی است از سمت سرور (PHP) و سمت کلاینت (jQuery). PHP نقش دارد در بازیابی داده‌های پیشنهادی از پایگاه داده یا آرایه، و jQuery وظیفه دارد درخواست‌ها را به سرور ارسال کند و نتایج را نمایش دهد.
بخش دوم: طراحی پایگاه داده و داده‌ها
برای مثال، فرض کنید، یک جدول در پایگاه داده دارید به نام `cities`، با ستون `name`. این جدول شامل نام شهرهای مختلف است.
```sql
CREATE TABLE cities (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL
);
```
در این جدول، نام شهرها را وارد کنید، چون قرار است هنگام تایپ، پیشنهادهای این جدول نشان داده شود.
بخش سوم: ساخت فایل PHP برای بازیابی داده‌ها
یک فایل PHP، مثلا `autocomplete.php`، می‌سازیم که درخواست‌های جستجو را دریافت و پاسخ می‌دهد.
```php
<?php
// اتصال به پایگاه داده
$conn = new mysqli("localhost", "پایگاه‌داده‌نام", "رمزپایگاه", "نام‌پایگاه");
// بررسی اتصال
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (isset($_GET['term'])) {
$term = $_GET['term'];
$sql = "SELECT name FROM cities WHERE name LIKE '%$term%' LIMIT 10";
$result = $conn->query($sql);
$suggestions = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$suggestions[] = $row['name'];
}
}
echo json_encode($suggestions);
}
?>
```
در این کد، درخواست با پارامتر `term` دریافت می‌شود، و بر اساس آن، پیشنهادهای مرتبط از پایگاه داده بازیابی می‌شود و به صورت JSON برگردانده می‌شود.
بخش چهارم: طراحی صفحه HTML و افزودن jQuery
حالا، صفحه HTML را می‌سازیم و با jQuery، درخواست‌های AJAX را مدیریت می‌کنیم.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>Auto Complete با PHP و jQuery</title>
<!-- اضافه کردن jQuery -->
<script src="https://code.jquery.com/jquery-
- 6.0.min.js"></script>
<style>
#suggestions {
border: 1px solid #ccc;
display: none;
position: absolute;
background: #fff;
max-height: 150px;
overflow-y: auto;
}
#suggestions div {
padding: 8px;
cursor: pointer;
}
#suggestions div:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h2>تایپ کنید تا پیشنهاد بیاید</h2>
<input type="text" id="city" autocomplete="off" placeholder="نام شهر..." />
<div id="suggestions"></div>
<script>
$(document).ready(function() {
$('#city').on('input', function() {
var query = $(this).val();
if (query.length >= 2) {
$.ajax({
url: 'autocomplete.php',
type: 'GET',
data: { term: query },
dataType: 'json',
success: function(data) {
var suggestions = $('#suggestions');
suggestions.empty();
if (data.length > 0) {
$.each(data, function(i, item) {
suggestions.append('<div>' + item + '</div>');
});
suggestions.show();
} else {
suggestions.hide();
}
}
});
} else {
$('#suggestions').hide();
}
});
// وقتی کاربر روی پیشنهاد کلیک می‌کند
$('#suggestions').on('click', 'div', function() {
$('#city').val($(this).text());
$('#suggestions').hide();
});
// وقتی کاربر خارج می‌شود، پیشنهادات پنهان شود
$(document).click(function(e) {
if (!$(e.target).closest('#city').length) {
$('#suggestions').hide();
}
});
});
</script>
</body>
</html>
```
در این کد، با هر تغییر در فیلد ورودی، درخواست AJAX به `autocomplete.php` ارسال می‌شود. نتایج، به صورت لیستی زیر فیلد نمایش داده می‌شوند، و کاربر می‌تواند روی پیشنهادها کلیک کند تا آنها را وارد کند.
بخش پنجم: نکات مهم و بهبودها
- امنیت: حتماً از پیشگیری از حملات SQL Injection استفاده کنید، مثلا با `prepared statements`.
- کارایی: در صورت حجم زیاد داده‌ها، بهتر است روی پایگاه داده فیلترهای مناسب اعمال کنید.
- تجربه کاربری: افزودن قابلیت‌های مانند کلیدهای جهت‌دار، یا تایید پیشنهادها با Enter.
نتیجه‌گیری
در این راهنما، قدم به قدم، فرآیند ساخت یک سیستم Auto Complete با PHP و jQuery را بررسی کردیم. این روش، می‌تواند در پروژه‌های مختلف، مانند فرم‌های ثبت‌نام، جستجوهای سریع، فیلترهای پیشرفته و موارد مشابه، بسیار مفید باشد و تجربه کاربری را بهبود بخشد. با کمی خلاقیت و افزودن ویژگی‌های دیگر، می‌توانید آن را به ابزار قدرتمندی تبدیل کنید.
اگر سوالی دارید یا نیاز به نمونه‌های بیشتر دارید، حتما بگویید!
