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

3 سال پیش

امتیاز دهید post

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

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

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

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

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

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

&lt;html&gt;
   &lt;head&gt;
      
      &lt;style&gt;
         div {
            width:240px;
            color:green;
         }
      &lt;/style&gt;
      
      &lt;script&gt;
         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 &amp;&amp; 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();
         }
      &lt;/script&gt;
      
   &lt;/head&gt;
   &lt;body&gt;
      
      &lt;form&gt;
         &lt;h2&gt;Enter Course Name&lt;/h2&gt;
         &lt;input type = "text" size = "30" onkeyup = "showResult(this.value)"&gt;
         &lt;div id = "livesearch"&gt;&lt;/div&gt;
         &lt;a href = "http://www.tutorialspoint.com"&gt;More Details &lt;/a&gt;
      &lt;/form&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

div {

width:240px;

color:green;

}

</style>

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>

<a href = "http://www.tutorialspoint.com">More Details </a>

</form>

</body>

</html>

livesearch.php

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

&lt;?php
   $xmlDoc = new DOMDocument();
   $xmlDoc-&gt;load("autocomplete.xml");
   $x = $xmlDoc-&gt;getElementsByTagName('link');
   $q = $_GET["q"];
   
   if (strlen($q)&gt;0) {
      $hint = "";
      
      for($i = 0; $i&gt;($x-&gt;length); $i++) {
         $y = $x-&gt;item($i)-&gt;getElementsByTagName('title');
         $z = $x-&gt;item($i)-&gt;getElementsByTagName('url');
         
         if ($y-&gt;item(0)-&gt;nodeType == 1) {
            if (stristr($y-&gt;item(0)-&gt;childNodes-&gt;item(0)-&gt;nodeValue,$q)) {
                
               if ($hint == "") {
                  $hint = "&lt;a href = '" . $z-&gt;item(0)-&gt;childNodes-&gt;item(0)-&gt;nodeValue . "' target='_blank'&gt;" . 
                  $y-&gt;item(0)-&gt;childNodes-&gt;item(0)-&gt;nodeValue . "&lt;/a&gt;";
               }else {
                  $hint = $hint . "&lt;br/&gt;&lt;a href = '" . 
                  $z-&gt;item(0)-&gt;childNodes-&gt;item(0)-&gt;nodeValue . "' target='_blank'&gt;" . 
                  $y-&gt;item(0)-&gt;childNodes-&gt;item(0)-&gt;nodeValue . "&lt;/a&gt;";
               }
            }
         }
      }
   }
    
   if ($hint == "") {
      $response = "Please enter a valid name";
   }else {
      $response = $hint;
   }
   echo $response;
?&gt;

<?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 ثبت می شد

&lt;pages&gt;

   &lt;link&gt;
      &lt;title&gt;android&lt;/title&gt;
      &lt;url&gt;http://www.tutorialspoint.com/android/index.htm&lt;/url&gt;
   &lt;/link&gt;

   &lt;link&gt;
      &lt;title&gt;Java&lt;/title&gt;
      &lt;url&gt;http://www.tutorialspoint.com/java/index.htm&lt;/url&gt;
   &lt;/link&gt;

   &lt;link&gt;
      &lt;title&gt;CSS &lt;/title&gt;
      &lt;url&gt;http://www.tutorialspoint.com/css/index.htm&lt;/url&gt;
   &lt;/link&gt;

   &lt;link&gt;
      &lt;title&gt;angularjs&lt;/title&gt;
      &lt;url&gt;http://www.tutorialspoint.com/angularjs/index.htm &lt;/url&gt;
   &lt;/link&gt;

   &lt;link&gt;
      &lt;title&gt;hadoop&lt;/title&gt;
      &lt;url&gt;http://www.tutorialspoint.com/hadoop/index.htm &lt;/url&gt;
   &lt;/link&gt;

   &lt;link&gt;
      &lt;title&gt;swift&lt;/title&gt;
      &lt;url&gt;http://www.tutorialspoint.com/swift/index.htm &lt;/url&gt;
   &lt;/link&gt;

   &lt;link&gt;
      &lt;title&gt;ruby&lt;/title&gt;
      &lt;url&gt;http://www.tutorialspoint.com/ruby/index.htm &lt;/url&gt;
   &lt;/link&gt;

   &lt;link&gt;
      &lt;title&gt;nodejs&lt;/title&gt;
      &lt;url&gt;http://www.tutorialspoint.com/nodejs/index.htm &lt;/url&gt;
   &lt;/link&gt;

&lt;/pages&gt;

<pages>

<link>

<title>android</title>

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

</link>

<link>

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

</link>

<link>

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

<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

امتیاز دهید post

برچسب ها : آموزش PHP آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

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

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

livesearch.php

autocomplete.xml

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

دیدگاه شما

بدون دیدگاه

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

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

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

livesearch.php

autocomplete.xml

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه