آموزش PHP

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

جستجوی کامل خودکار

جعبه جستجوی کامل خودکار یا Auto complete search box  پیشنهادات را هنگام ورود اطلاعات به فیلد ارائه می دهد. در اینجا ما برای استفاده از پیشنهادات کامل خودکار از xml استفاده می کنیم. مثال زیر نحوه استفادۀ 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.softskill.ir>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 بر اساس فیلد عنوان و Url می باشد:

<pages>

   <link>
      <title>android</title>
      <url>http://www.softskill.ir/android/index.htm</url>
   </link>

   <link>
      <title>Java</title>
      <url>http://www.softskill.ir/java/index.htm</url>
   </link>

   <link>
      <title>CSS </title>
      <url>http://www.softskill.ir/css/index.htm</url>
   </link>

   <link>
      <title>angularjs</title>
      <url>http://www.softskill.ir/angularjs/index.htm </url>
   </link>

   <link>
      <title>hadoop</title>
      <url>http://www.softskill.ir/hadoop/index.htm </url>
   </link>

   <link>
      <title>swift</title>
      <url>http://www.softskill.ir/swift/index.htm </url>
   </link>

   <link>
      <title>ruby</title>
      <url>http://www.softskill.ir/ruby/index.htm </url>
   </link>

   <link>
      <title>nodejs</title>
      <url>http://www.softskill.ir/nodejs/index.htm </url>
   </link>

</pages>

نتیجه زیر را تولید می کند:

autocomplete search

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش PHP

Learn PHP

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...