آموزش جستجوی خودکار Ajax در PHP

erfan molaei
3 سال پیش
آموزش جستجوی خودکار Ajax در PHP

آموزش جستجوی خودکار Ajax در PHP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش جستجوی خودکار Ajax در PHP خواهیم پرداخت.

آموزش جستجوی کامل خودکار در php

کادر جستجوی کامل خودکار هنگام وارد کردن داده ها در فیلد، پیشنهادات را ارائه می دهد. در اینجا ما از xml برای فراخوانی با پیشنهادات کامل خودکار استفاده می کنیم. مثال زیر نحوه استفاده از جعبه متن خودکار با استفاده از php را نشان می دهد.

آموزش صفحه ایندکس در php

صفحه ایندکس باید به شرح زیر باشد –

<html>
   <head>
      
      <style>
         div {
            width:240px;
            color:green;
         }
      </style>
      
      <script>
         function showResult(str) {
            
            if (str.length == 0) {
               document.getElementById("livesearch").innerHTML = "";
               document.getElementById("livesearch").style.border = "0px";
               return;
            }
            
            if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
            }else {
               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>
         <h2>Enter Course Name</h2>
         <input type = "text" size = "30" onkeyup = "showResult(this.value)">
         <div id = "livesearch"></div>
         <a href = "http://www.tutorialspoint.com">More Details </a>
      </form>
      
   </body>
</html>

 

livesearch.php

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

<?php
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("autocomplete.xml");
   $x = $xmlDoc->getElementsByTagName('link');
   $q = $_GET["q"];
   
   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>";
               }
            }
         }
      }
   }
    
   if ($hint == "") {
      $response = "Please enter a valid name";
   }else {
      $response = $hint;
   }
   echo $response;
?>

 

autocomplete.xml

این شامل داده های کامل خودکار بود و توسط livesearch.php بر اساس فیلد tittle و Url ثبت می شد

<pages>

   <link>
      <title>android</title>
      <url>http://www.tutorialspoint.com/android/index.htm</url>
   </link>

   <link>
      <title>Java</title>
      <url>http://www.tutorialspoint.com/java/index.htm</url>
   </link>

   <link>
      <title>CSS </title>
      <url>http://www.tutorialspoint.com/css/index.htm</url>
   </link>

   <link>
      <title>angularjs</title>
      <url>http://www.tutorialspoint.com/angularjs/index.htm </url>
   </link>

   <link>
      <title>hadoop</title>
      <url>http://www.tutorialspoint.com/hadoop/index.htm </url>
   </link>

   <link>
      <title>swift</title>
      <url>http://www.tutorialspoint.com/swift/index.htm </url>
   </link>

   <link>
      <title>ruby</title>
      <url>http://www.tutorialspoint.com/ruby/index.htm </url>
   </link>

   <link>
      <title>nodejs</title>
      <url>http://www.tutorialspoint.com/nodejs/index.htm </url>
   </link>

</pages>

 

نتیجه زیر را به همراه خواهد داشت –

Autocomplete Search

 

منبع.

 

لیست جلسات قبل آموزش PHP

  1. آموزش PHP
  2. معرفی PHP
  3. آموزش تنظیمات محیط PHP
  4. آموزش نحو PHP
  5. آموزش انواع متغیر در PHP
  6. آموزش انواع ثابت ها در PHP
  7. آموزش انواع عملگرها در PHP
  8. آموزش تصمیم گیری در PHP
  9. آموزش انواع حلقه در PHP
  10. آموزش آرایه ها در PHP
  11. آموزش رشته ها در PHP
  12. آموزش مفاهیم وب در PHP
  13. آموزش روش های  GET & POST در PHP
  14. آموزش Inclusion فایل در PHP
  15. آموزش پرونده ها و I / O در PHP
  16. آموزش توابع در PHP
  17. آموزش کوکی ها در PHP
  18. آموزش جلسات در PHP
  19. آموزش ارسال ایمیل با استفاده از PHP
  20. آموزش بارگذاری پرونده در PHP
  21. آموزش استاندارد کدگذاری در PHP
  22. آموزش متغیرهای از پیش تعریف شده در PHP
  23. آموزش عبارات منظم در PHP
  24. آموزش مدیریت خطا و استثنا در PHP
  25. آموزش اشکال زدایی در PHP
  26. آموزش تاریخ و زمان در PHP
  27. آموزش MySQL در PHP
  28. آموزش AJAX در PHP
  29. آموزش XML در PHP
  30. آموزش برنامه نویسی شی گرا در PHP
  31. آموزش PHP برای توسعه دهندگان C
  32. آموزش PHP برای توسعه دهندگان PERL
  33. آموزش معرفی فرم در PHP
  34. آموزش اعتبار سنجی در PHP
  35. آموزش فرم کامل در PHP
  36. آموزش ورود به سیستم در PHP
  37. آموزش ورود به فیس بوک در PHP
  38. آموزش ادغام PayPal در PHP
  39. آموزش ورود به MySQL در PHP
  40. آموزش جستجوی Ajax در PHP
  41. آموزش Ajax XML Parser در PHP
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه