PHP – جستجوی زنده (AJAX Live Search)

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)، مراحل زیر انجام می‌شود:

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

این روش به شما امکان می‌دهد تا به صورت دینامیک و بدون نیاز به بارگذاری مجدد کل صفحه، اطلاعات جستجو را نمایش دهید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.