AJAX می‌تواند برای ایجاد جستجوی زنده که در آن نتایج جستجو هنگام تایپ کردن نمایش داده می‌شوند، استفاده شود. جستجوی زنده مزایای زیادی نسبت به جستجوی سنتی دارد:
- نتایج هنگام تایپ نمایش داده می‌شوند.
- نتایج با ادامه تایپ باریک‌تر می‌شوند.
- اگر نتایج خیلی باریک شوند، با حذف کاراکترها می‌توان نتایج گسترده‌تری را مشاهده کرد.
مثال زیر یک جستجوی زنده را نشان می‌دهد که در آن نتایج از یک فایل XML (links.xml) دریافت می‌شوند. برای ساده و کوچک نگه داشتن این مثال، فقط شش نتیجه موجود است.
مثال توضیح داده شده - صفحه HTML
هنگامی که کاربر یک کاراکتر را در فیلد ورودی بالا تایپ می‌کند، تابعی به نام showResult() اجرا می‌شود. این تابع با رویداد onkeyup فراخوانی می‌شود:
<html>
<head>
<script>
function showResult(str) {
if (str.length == 0) {
document.getElementById("livesearch").innerHTML = "";
document.getElementById("livesearch").style.border = "0px";
return;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("livesearch").innerHTML = this.responseText;
document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
}
}
xmlhttp.open("GET", "livesearch.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>توضیح کد منبع:
- اگر فیلد ورودی خالی باشد (
str.length == 0)، تابع محتوای مکان‌نمایlivesearchرا پاک کرده و از تابع خارج می‌شود. - اگر فیلد ورودی خالی نباشد، تابع
showResult()کارهای زیر را انجام می‌دهد:- ایجاد یک شیء
XMLHttpRequest - ایجاد تابعی که هنگام آماده شدن پاسخ سرور اجرا شود.
- ارسال درخواست به یک فایل در سرور
- اضافه کردن یک پارامتر (
q) به URL (با محتوای فیلد ورودی)
- ایجاد یک شیء
فایل PHP
صفحه‌ای که توسط جاوااسکریپت بالا فراخوانی می‌شود، یک فایل PHP به نام livesearch.php است.
کد منبع در livesearch.php یک فایل XML را برای عناوین منطبق با رشته جستجو جستجو می‌کند و نتیجه را برمی‌گرداند:
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x = $xmlDoc->getElementsByTagName('link');
// دریافت پارامتر q از URL
$q = $_GET["q"];
// جستجو در همه لینک‌های فایل XML اگر طول q بیشتر از 0 باشد
if (strlen($q) > 0) {
$hint = "";
for ($i = 0; $i < ($x->length); $i++) {
$y = $x->item($i)->getElementsByTagName('title');
$z = $x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType == 1) {
// پیدا کردن لینک‌هایی که با متن جستجو مطابقت دارند
if (stristr($y->item(0)->childNodes->item(0)->nodeValue, $q)) {
if ($hint == "") {
$hint = "<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
} else {
$hint = $hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// تنظیم خروجی به "no suggestion" اگر هیچ اشاره‌ای پیدا نشد
// یا به مقادیر صحیح
if ($hint == "") {
$response = "no suggestion";
} else {
$response = $hint;
}
// خروجی پاسخ
echo $response;
?>توضیحات
اگر متنی از جاوااسکریپت ارسال شده باشد (strlen($q) > 0)، مراحل زیر انجام می‌شود:
- بارگذاری یک فایل XML به یک شیء XML DOM جدید
- جستجو در تمام عناصر
<title>برای پیدا کردن تطابق‌های متن ارسال شده از جاوااسکریپت - تنظیم URL و عنوان صحیح در متغیر
$response، اگر بیش از یک تطابق پیدا شود، همه تطابق‌ها به متغیر اضافه می‌شوند - اگر هیچ تطابقی پیدا نشد، متغیر
$responseبه “no suggestion” تنظیم می‌شود
این روش به شما امکان می‌دهد تا به صورت دینامیک و بدون نیاز به بارگذاری مجدد کل صفحه، اطلاعات جستجو را نمایش دهید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام