جستجوی زنده AJAX (AJAX Live Search)
در «جستجوی زنده AJAX»، نتایج هنگام تایپ ظاهر می شوند. «AJAX» یعنی درخواست غیرهمزمان بدون رفرش کامل. مثل جستجو در گوشی که حروف را می زنی و پیشنهاد می آید.
نمونه جستجوی زنده AJAX
در ورودی متن، رویداد onkeyup هر بار تابعی را اجرا می کند. سپس با XMLHttpRequest به livesearch.php?q=... درخواست می فرستیم. پاسخ، HTML آماده نمایش است.
برای آشنایی های مرتبط، صفحه AJAX و XML و AJAX با PHP را ببین. همچنین، برای سئو از لینک کانونی جستجوی زنده AJAX استفاده کن.
کد سمت سرور: livesearch.php
این کد فایل links.xml را می خواند. سپس عنوان ها را با متن جستجو مقایسه می کند. در پایان، لینک های منطبق را برمی گرداند.
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load('links.xml');
$x = $xmlDoc->getElementsByTagName('link');
$q = $_GET['q'];
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>";
}
}
}
}
}
if (!isset($hint) || $hint == '') {
$response = 'no suggestion';
} else {
$response = $hint;
}
echo $response;
?>
گام های عملی برای پیاده سازی
- فایل links.xml را در ریشه سرور بگذار.
- اسکریپت livesearch.php را همان جا ذخیره کن.
- در HTML، ورودی متن بساز و onkeyup را تنظیم کن.
- پاسخ را در #livesearch قرار بده و استایل بده.
نکته: اگر ورودی خالی بود، جعبه نتایج را پاک کن. سپس حاشیه آن را صفر کن.
جمع بندی سریع
- جستجوی زنده AJAX نتایج را هنگام تایپ می دهد.
- درخواست به livesearch.php?q=... ارسال می شود.
- PHP با DOM فایل XML را می گردد.
- پاسخ، لیست لینک های منطبق است.
- ورودی خالی یعنی «no suggestion» برگردان.