میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

جستجوی پیشرفته در ajax

با استفاده از AJAX، می توانید جستجوهای کاربر پسندتر و تعاملی تری ایجاد نمایید.


آموزش ساخت جستجوی پیشرفته با استفاده از AJAX در PHP

مزیت های جستجوی پیشرفته در مقایسه با جستجوی سنتی:

  • در لحظه ی تایپ، نتیجه نمایش داده خواهد شد.
  • اگر تایپ کردن را ادامه دهید، نتیجه محدود تر می شود.
  • اگر نتیجه بیش از حد محدود شده است، می توانید کاراکترهای پایانی را پاک کنید تا نتیجه مناسب تری داشته باشید.

توضیح مثال – صفحه HTML

زمانی که کاربر در کادر ورودی ، کلمه ای را تایپ کند، تابع “()showResult” اجرا می شود. این تابع زمانی فراخوانی می شود که رویداد “onkeyup” فیلد ورودی رخ دهد:

<html>
<head>
<script>
function showResult(str)
{
if (str.length==0)
{
document.getElementById(“livesearch”).innerHTML=””;
document.getElementById(“livesearch”).style.border=”0px”;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“livesearch”).innerHTML=xmlhttp.responseText;
document.getElementById(“livesearch”).style.border=”1px solid #A5ACB2″;
}
}
xmlhttp.open(“GET”,”livesearch.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<p>جستجوی پیشرفته:</p>
<input type=”text” size=”30″ onkeyup=”showResult(this.value)”>
<div id=”livesearch”></div>
</form>

</body>
</html>

توضیح کد Javascript:

اگر فیلد ورودی خالی باشد (str.length==0)، محتوای عنصر با شناسه “livesearch” خالی و خصوصیت border آن با مقدار “۰px” تنظیم می شود و در نهایت، از تابع خارج می شود.

اگر فیلد ورودی خالی نباشد، تابع ()showResult کارهای زیر را انجام می دهد:

  • شیء XMLHttpRequest ایجاد می شود.
  • زمانی که پاسخ سرور آماده باشد، یک تابع ایجاد و اجرا می شود. (وظیفه این تابع این است که پاسخ دریافت شده از سرور را در عنصر با شناسه “livesearch” قرار دهد)
  • درخواست یک فایل به سرور ارسال می شود.
  • توجه داشته باشید که یک پارامتر (q) به URL اضافه شده است (با محتوای فیلد ورودی تنظیم می شود)

فایل PHP

فایلی که توسط کد JavaScript بالا صدا زده می شود، یک فایل PHP بنام “livesearch.php” است.

در فایل “livesearch.php”، یک سند XML بنام “links.xml” بارگذاری می شود. در این فایل یک جستجو انجام شده و نتیجه بصورت HTML برگردانده می شود:

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load(“links.xml”);

$x=$xmlDoc->getElementsByTagName(‘link’);

//get the q parameter from URL
$q=$_GET[“q”];

//lookup all links from the xml file if length of 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)
{
//find a link matching the search text
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>”;
}
}
}
}
}

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint==””)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

توضیح: زمانی که درخواست از JavaScript به فایل PHP ارسال می شود، کارهای زیر اتفاق می افتد:

  1. یک شیء XML DOM ایجاد و فایل “links.xml” درون آن load می شود.
  2. تمام عناصر <title> که با نام ارسال شده از JavaScript تطابق داشته باشند، پیدا می شود.
  3. URL صحیح بهمراه عنوان لینک در متغیر “response$” ذخیره می شود. اگر بیشتر از یک مورد پیدا شود، با استفاده از تگ <br /> آنها را پشت سر هم در متغیر ذکر شده ذخیره می کنیم.
  4. اگر هیچ موردی پیدا نشود متغیر “response$” با مقدار “no suggestion” تنظیم می شود.

 

امیدواریم آموزش جستجوی پیشرفته در ajax نیز برای شما مفید واقع شده باشد .برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟