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

چاپ

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

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

Wiki

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

مثال زیر، نحوه ساخت یک جستجوی پیشرفته را نشان می دهد، نتیجه در لحظه ای که تایپ می کنید، نمایش داده می شود:

مثال (جستجوی پیشرفته در ajax)

جستجوی پیشرفته:
 

نتیجه جستجوی مثال بالا، با استفاده از یک سند XML بنام "links.xml" تولید می شود. بدلیل اینکه می خواستیم یک مثال ساده و کوچک داشته باشیم، تنها شش نتیجه قابل نمایش است.

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

Wiki

زمانی که کاربر در کادر ورودی بالا، کلمه ای را تایپ کند، تابع "()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 آن با مقدار "0px" تنظیم می شود و در نهایت، از تابع خارج می شود.

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

فایل PHP

Wiki

فایلی که توسط کد 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" تنظیم می شود.

برای مشاهده فیلم ها و آموزش های پروژه محور برنامه نویسی PHP کلیک کنید.

JavaScript   برنامه نویسی php   آموزشphp  
نوشته شده توسط امیر پهلوان صادق
بازدید: 23936