۳
آذر

جلسه ۴۷ : Live Search با Ajax

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام و ادب خدمت کاربران محترم سایت پی وی لرن.
در این جلسه قصد داریم تا به آموزش ساخت Live Search (جستجوی زنده) با Ajax بپردازیم.

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

Ajax Live Search

Live Search با Ajax

در ادامه برنامه ای خواهیم نوشت تا نتایج جستجو را هنگام تایپ کردن به کاربر نشان دهد.

جستجوی زنده در مقایسه با جستجوی سنتی مزایایی دارد از جمله:

نتایج در هنگام تایپ کردن نمایش داده می شوند.
می توان با حذف یا اضافه کردن کاراکتر ها کیفیت نتایج را بهبود بخشید

نتایجی که ما در برنامه از آن ها استفاده خواهیم کرد در فایل links.xml ذخیره شده اند:

مثال :

<?xml version="1.0" encoding="UTF-8"?>
<pages>
  <link>
    <title>HTML a tag</title>
    <url>https://www.pvlearn.com/tags/tag_a.asp</url>
  </link>
  <link>
    <title>HTML br tag</title>
    <url>https://www.pvlearn.com/tags/tag_br.asp</url>
  </link>
  <link>
    <title>CSS background Property</title>
    <url>https://www.pvlearn.com/cssref/css3_pr_background.asp</url>
  </link>
  <link>
    <title>CSS border Property</title>
    <url>https://www.pvlearn.com/cssref/pr_border.asp</url>
  </link>
  <link>
    <title>JavaScript Date Object</title>
    <url>https://www.pvlearn.com/jsref/jsref_obj_date.asp</url>
  </link>
  <link>
    <title>JavaScript Array Object</title>
    <url>https://www.pvlearn.com/jsref/jsref_obj_array.asp</url>
  </link>
</pages>

<?xml version="1.0" encoding="UTF-8"?>

<pages>

<link>

<url>https://www.pvlearn.com/tags/tag_a.asp</url>

</link>

<link>

<url>https://www.pvlearn.com/tags/tag_br.asp</url>

</link>

<link>

<title>CSS background Property</title>

<url>https://www.pvlearn.com/cssref/css3_pr_background.asp</url>

</link>

<link>

<title>CSS border Property</title>

<url>https://www.pvlearn.com/cssref/pr_border.asp</url>

</link>

<link>

<title>JavaScript Date Object</title>

<url>https://www.pvlearn.com/jsref/jsref_obj_date.asp</url>

</link>

<link>

<title>JavaScript Array Object</title>

<url>https://www.pvlearn.com/jsref/jsref_obj_array.asp</url>

</link>

</pages>

توضیحات برنامه

هنگامی که کاربر متنی را در فیلد ورودی تایپ می کند، تابع ()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 (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>

<html>

<head>

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 (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>

</form>

</body>

</html>

توضیحات کد:

اگر فیلد ورودی خالی باشد (str.length == 0)، تابع محتویات livesearch را پاک می کند و از تابع خارج می شود.

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

یک XMLHttpRequest ایجاد می کند
وقتی که server responce آماده باشد تابعی را اجرا می کند
یک درخواست به فایل php ارسال می کند
توجه داشه باشید که پارامتر q به url اضافه شده است.(با محتوای فیلد ورودی)

فایل PHP

فایلی که توسط جاوااسکریپت فراخوانده می شود، livesearch.php نام دارد.

کد این فایل یک فایل xml را برای تطابق دادن رشته جستجو و بازگرداندن نتایج، جستجو می کند:

مثال :

<?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 was found
// or to the correct values
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>

<?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 was found

// or to the correct values

if ($hint=="") {

$response="no suggestion";

} else {

$response=$hint;

}

//output the response

echo $response;

اگر شرط (strlen(q$) > 0) برقرار باشد، کار های زیر انجام می شود:

یک فایل xml را در یک شئ جدید XML DOM بارگذاری می کند.
با استفاده از حلقه تکرار تمام عناصر <title> را برای پیدا کردن نتیجه از متن ارسال شده توسط جاوااسکریپت، جستجو می کند
url و عنوان مناسب دا در متغیر responce$ ذخیره می کند
اگر تطابقی صورت نگرفت، مقدار متغیر responce$ به no suggestion تغییر می یابد

جلسه ساخت Live Search با Ajax نیز به اتمام رسید.

در جلسه بعد به ساخت خوراک خبری با استفاده ار Ajax خواهیم پرداخت. با ما همراه باشید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۷ : Live Search با Ajax

Live Search با Ajax

توضیحات برنامه

فایل PHP

لیست مطالب دوره

مقدمات آموزش PHP

PHP Forms

MySQL Database

PHP - XML

PHP - AJAX

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ