Can't make a searchbar, either via w3schools or ajax live search work on my site

Question

I'm trying to make a search function for my website. I got this code from w3schools but it doesn't work:

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) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

php:

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

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

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
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) {
      //find a link matching the search text
      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>";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>

xml:

<?xml version="1.0" encoding="utf-8"?>
<pages>
  <link>
    <title>HTML a tag</title>
    <url>https://www.w3schools.com/tags/tag_a.asp</url>
  </link>
  <link>
    <title>HTML br tag</title>
    <url>https://www.w3schools.com/tags/tag_br.asp</url>
  </link>
  <link>
    <title>CSS background Property</title>
    <url>https://www.w3schools.com/cssref/css3_pr_background.asp</url>
  </link>
  <link>
    <title>CSS border Property</title>
    <url>https://www.w3schools.com/cssref/pr_border.asp</url>
  </link>
  <link>
    <title>JavaScript Date Object</title>
    <url>https://www.w3schools.com/jsref/jsref_obj_date.asp</url>
  </link>
  <link>
    <title>JavaScript Array Object</title>
    <url>https://www.w3schools.com/jsref/jsref_obj_array.asp</url>
  </link>
</pages>

But when I try to implement this I get the following error:

I also tried other searching methods, like Ajax live search but I can't seem to set it up correctly.

It would be great if someone could either fix this code or help me set up Ajax live search.

Thanks in advance!

That doesn't really look like an error, it just looks like PHP code. Check out this post to help figure out why that could be happening. https://stackoverflow.com/questions/5121495/php-code-is-not-being-executed-instead-code-shows-on-the-page — Don't Panic, Jun 18 '19 at 23:11
Okay, first of all, are you accessing the page from a web server that has php installed? — Don't Panic, Jun 19 '19 at 14:03

Can't make a searchbar, either via w3schools or ajax live search work on my site

0 Answers0