How to get the first letter on my livesearch?

Right now if I type any letter into my livesearch, it shows the results which have that letter included but they are not beginning with it. I need the code to show only those results that begin with the typed letter. And if there is no result, it should show "no suggestion" but it is not working somehow. Can anyone fix that?

function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  var xmlhttp=new XMLHttpRequest();
  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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="sb">
<form>
<input type="text" placeholder="Type ..." onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</div>

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

<pages>
<link>
<title>Example</title>
<url>https://www.w3schools.com/tags/tag_a.asp</url>
</link>
<link>
<title>Example</title>
<url>https://www.w3schools.com/tags/tag_br.asp</url>
</link>
</pages>

Solution

Check your conditional syntax that search for items:

//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))

This is making the search $q in any part of item, what you want to do is to search only if it begins with $q , so you have to change syntax:

if (strpos(strtolower($y->item(0)->childNodes->item(0)->nodeValue), strtolower($q)) === 0)

So now it will search if matches at the beginning (position === 0). You also notice that I use strtolower() in both compared values, this is because strpos() is case sensitive, and stristr() isn't.

Could you try now changing this line and tell us if it worked?