PHP
JavaScript
Angular AngularJS jQuery Ajax
Linux
.htaccess

April 19, 2016

Ajax Live Data Search using PHP & XML

2118

Hi, friends in this tutorial I show you Ajax live data search using PHP & XML. Now I show you a live data search, where you get search results while you type. Live search has good compared to regular searching. Using XML file we are going to search the type result. If the user types a text or number in the input field, the function “showResult()” is executed. By the “onkeyup” event the function is triggered.

Ajax Live Data Search using PHP & XML ( PART – 1)

Ajax Live Data Search using PHP & XML ( PART – 2)

show.php

<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(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>
<h1>Search</h1>
<input type="text" size="50" onKeyUp="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>

<html>

<head>

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(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>

<h1>Search</h1>

</form>

</body>

</html>

livesearch.php

<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(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>
<h1>Search</h1>
<input type="text" size="50" onKeyUp="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
<?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 results found" if no hint was found or to the correct values

if($hint==""){
 $response = "No results found";
}
else
{
 $response=$hint;
}

//output the response
echo $response;
?>

<html>

<head>

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(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>

<h1>Search</h1>

</form>

</body>

</html>

<?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 results found" if no hint was found or to the correct values

if($hint==""){

$response = "No results found";

}

else

{

$response=$hint;

}

//output the response

echo $response;

links.xml

<pages>
 <link>
 <title>Templates</title>
 <url>http://www.oneeris.com/templates.html</url>
 </link>
 <link>
 <title>Tutorials</title>
 <url>http://www.oneeris.com/tutorials.html</url>
 </link>
 <link>
 <title>Html Home</title>
 <url>http://www.oneeris.com/tutorials/html/html-home.html</url>
 </link>
 <link>
 <title>Photoshop</title>
 <url>http://www.oneeris.com/tutorials/photoshop/photoshop-home.html</url>
 </link>
 <link>
 <title>Bootstrap</title>
 <url>http://www.oneeris.com/templates/bootstrap-templates.html</url>
 </link>
 <link>
 <title>Logos</title>
 <url>http://www.oneeris.com/templates/logo.html</url>
 </link>
</pages>

<pages>

<link>

<title>Templates</title>

<url>http://www.oneeris.com/templates.html</url>

</link>

<link>

<title>Tutorials</title>

<url>http://www.oneeris.com/tutorials.html</url>

</link>

<link>

<url>http://www.oneeris.com/tutorials/html/html-home.html</url>

</link>

<link>

<title>Photoshop</title>

<url>http://www.oneeris.com/tutorials/photoshop/photoshop-home.html</url>

</link>

<link>

<title>Bootstrap</title>

<url>http://www.oneeris.com/templates/bootstrap-templates.html</url>

</link>

<link>

<title>Logos</title>

<url>http://www.oneeris.com/templates/logo.html</url>

</link>

</pages>

Download

Checkout Added to cart

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

How to Search a PHP Array Using AJAX

Displaying MySQLi Records in a HTML Table

Ajax Live Data Search using PHP & XML

Share:

Ajax Live Data Search using PHP & XML ( PART – 1)

Ajax Live Data Search using PHP & XML ( PART – 2)

show.php

livesearch.php

links.xml

Download

Mraj

Don't miss on latest updates