%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

جستجوی پیشرفته در 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 کارهای زیر را انجام می دهد:

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

فایل 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 کلیک کنید.

دیدگاه‌ها  

0 # karimi125 1397-04-11 10:30
سلام
من یک فایل html با مطالب زیادی درست کردم و میخواهم یک سرچ کامل در آن قرار دهم روش های زیادی را تست کردم اما نشد
امکانش هست فایلهای این کدهای جستجو را برای من ارسال نمایید

باتشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # اکرم 2 1394-09-07 10:17
فایل XML کجاست؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مهرداد صلاحی 1394-09-07 11:22
با سلام.
فایل درون این آدرس http://beyamooz.com/try_it_yourself/cd_catalog.xml قرار داره. میتونید دانلودش کنید.
کافیه این آدرس رو در مرورگر وارد و اینتر کنید. فایل مذکور باز خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # رضا111 1394-04-30 05:31
سلام
ای خدا خیرت بده .بالاخره ی جستجوی پیدا کردم ک بفهمم.
ثواب کردی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # majid 1394-02-30 17:10
سلام
اگر بخام ی موتور جستجو با چند تا فیلد مانند عکس درست کنم و یا از دیتا بیس یا فایل اکسل بخونه چطوره ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-02-31 09:04
سلام
برای ساخت یه فرمی مثل تصویر بالا، پیشنهاد می کنم از فریم ورک Kendo UI استفاده کنید، برای کسب اطلاعات بیشتر در این زمینه به لینک زیر مراجعه فرمایید:
http://beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-kendo-ui
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # majid 1394-03-02 09:43
می تونید بیشتر کمک کنید؟ باتشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-03-03 22:32
متأسفانه جای این بحث اینجا نیست، اما اگر فریم ورک Kendo UI را دقیق مطالعه فرمایید، مطمئن باشید که در انتها موفق به ساخت فرم بالا خواهید شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرمحمد 1393-08-14 12:23
سلام مجدد ممنون از کدتون همین الان مشکلم برطرف شد ایراد از خودم بود بازم ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیرمحمد 1393-08-14 12:19
ممنون از اینکه پاسخ گو هستید مشکلم تا حدی برطرف شد ببینید مشکل دقیقا همین است که این فایل html من چه جوری باید php رو ببین من از includ کردن php داخل html استفاده کردم مشکلم تا حدی حل شد فقط این nosuggest یه بار توصفحه هست به صورت ثابت مثل اینکه موقع اجرا یکبار به صورت جدا عملیات اجرا شده باش یعنی عملیات به طریقه بالا اجرا میش ولی فقط فرض کنید این nosuggest بیرون این کشابی باش وبقیه خودش اجرا بشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # امیرمحمد 1393-08-13 23:17
با سلام یه سوال این کد php رو داخل تگ php تو خود html نوشتم اما خروجی که به من می دهد به این صورت نیست لطفا راهنمایی کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-08-14 07:17
سلام، دقیقتر بفرمایید که مشکل خروجی کد شما چیست؟ اما اگر دقیق مانند بالا عمل کنید یعنی فایل HTML و فایل PHP و فایل XML را در کنار هم قرار دهید و کد را اجرا نمایید، مشکلی پیش نخواهد آمد...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی PHP

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی