Vahsi Uzman 1
Vahsi Uzman
Bvural41 1
Bvural41
OnurBoyla 1
OnurBoyla
noisiv 1
noisiv
Manwe Work 1
Manwe Work
Hikaye Ekle

PHP - AJAX Otomatik Tamamlama Arama

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Otomatik tamamlama özelliği, kullanıcı sağlanan arama kutusuna veri girerken girdi önerisini göstermek için önceden yazılmış bir mekanizmadır. Ayrıca, kullanıcıların girdisine tepki verdiği için canlı arama olarak da adlandırılır. Bu örnekte, otomatik tamamlama metin kutusunun kullanımını göstermek için PHP'de AJAX ve XML ayrıştırıcısını kullanacağız.

Bu uygulamanın üç ana bileşeni vardır:

  • XML Belgesi
  • JavaScript Kodu
  • PHP'de XML Ayrıştırıcısı
Şimdi bu üç bileşeni ayrıntılı olarak tartışalım.

XML Belgesi

Aşağıdaki XML betiğini " autocomplete.xml " olarak belge kök klasörüne kaydedin.

<?xml version = "1.0" encoding = "utf-8"?>
<pages>

<link>
<title>android</title>
<url> </url>
</link>

<link>
<title>Java</title>
<url> </url>
</link>

<link>
<title>CSS </title>
<url> </url>
</link>

<link>
<title>angularjs</title>
<url> </url>
</link>

<link>
<title>hadoop</title>
<url> </url>
</link>

<link>
<title>swift</title>
<url> </url>
</link>

<link>
<title>ruby</title>
<url> </url>
</link>

<link>
<title>nodejs</title>
<url> </url>
</link>

</pages>

JavaScript Kodu

Aşağıdaki betik, kullanıcının istediği bir ders adını girmesi için bir metin alanı oluşturur. Her tuş vuruşunda bir JavaScript fonksiyonu çağrılır ve giriş değeri GET yöntemiyle sunucu tarafındaki PHP betiğine geçirilir. Sunucunun yanıtı eşzamansız olarak oluşturulur.

Bu kodu " index.php " olarak kaydedin.

HTML:
<html>
<head>
   <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 = "https://www.tutorialspoint.com">More Details</a>
   </form>
</body>
</html>

PHP'de XML Ayrıştırıcısı

Bu sunucudaki PHP betiğidir. Verilen XML kaynak belgesini ayrıştırır, giriş alanına girilen karakterleri okur, ayrıştırılmış XNL nesnesinde arar ve yanıtı geri gönderir.

Aşağıdaki kodu "livesearch.php" olarak kaydedin.


PHP:
<?php
   $xml_doc = new DOMDocument();
   $xml_doc->load('autocomplete.xml');

   $x=$xml_doc->getElementsByTagName('link');

   $q = $_GET['q'];
   $result = '';
   foreach($x as $node) {
      if (stripos("{$node->nodeValue}", $q) !== false) {
         $result .= "{$node->nodeValue}";
      }
   }

   // Set $response to "No records found." in case no hint was found
   // or the values of the matching values
   if ($result == '')
      $result = 'No records found.';

   // show the results or "No records found."
   echo $result;
?>

XAMPP sunucusu çalışırken, " " adresini ziyaret edin ve tarayıcı bir giriş metin alanı görüntüler. İçine girilen her karakter için, ilgili öneriler altında görünür.

php_ajax_auto_search.jpg


 

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Geri
Üst