John Davidson

Message:

https://www.w3schools.com/php/php_ajax_livesearch.asp

I am trying to modify the code in the tutorial for an ajax live search, to include a new field called keyword. I want the search to also search the keyword field in order to improve user experience.

I have already modified the link.xml fine to include the newly added keyword tag.

 <link>

<title> title </title>

<keyword> keywords here </keyword>

<url>https://path to url</url>

 </link>

I am kind of stuck in the area below, trying to modify the conditional statement.

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

    $k=$x->item($i)->getElementsByTagName('keyword'); // New field added 

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

?>

---

My Answer:
To modify the Ajax Live Search code to include the new field "keyword", you will need to make changes in both the HTML file and the PHP file.

1. In the HTML file (index.html), add a new input field for the keyword:

html



2. In the JavaScript code in the HTML file, modify the showResult() function to include the keyword field in the search query:

javascript
function showResult() {
var str = document.getElementById('search').value;
var keyword = document.getElementById('keyword').value;
if (str.length==0 && keyword.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","search.php?q="+str+"&keyword="+keyword,true);
xmlhttp.send();
}


3. In the PHP file (search.php), modify the query to include the keyword field:

php
$q = $_GET['q'];
$keyword = $_GET['keyword'];

$xmlDoc=new DOMDocument();
$xmlDoc->load("link.xml");

$x=$xmlDoc->getElementsByTagName('link');
foreach ($x as $link) {
$title=$link->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$url=$link->getElementsByTagName('url')->item(0)->childNodes->item(0)->nodeValue;
$desc=$link->getElementsByTagName('description')->item(0)->childNodes->item(0)->nodeValue;
$key=$link->getElementsByTagName('keyword')->item(0)->childNodes->item(0)->nodeValue;

if (stristr($title,$q) || stristr($url,$q) || stristr($desc,$q) || stristr($key,$keyword)) {
echo "$title
";
}
}


With these modifications, the Ajax Live Search will now search the keyword field in addition to the title, URL, and description fields. Make sure to test the functionality to ensure it works as expected.