PHP - AJAX Otomatik Tamamlama Arama

Carissa · 5 Kas 2024

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>
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
</url>
</link>

<link>
<title>Java</title>
<url>
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
</url>
</link>

<link>
<title>CSS </title>
<url>
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
</url>
</link>

<link>
<title>angularjs</title>
<url>
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
</url>
</link>

<link>
<title>hadoop</title>
<url>
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
</url>
</link>

<link>
<title>swift</title>
<url>
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
</url>
</link>

<link>
<title>ruby</title>
<url>
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
</url>
</link>

<link>
<title>nodejs</title>
<url>
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
</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, "

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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