PHP Example AJAX Live Search [closed]

StackOverflow https://stackoverflow.com/questions/17193409

Question

i'm relatively new when it comes to creating web pages that use PHP and XML but i am interested in somthine that i saw at W3S Schools. i want to create a AJAX live search to the one that is shows in there example page but first i need help learning how to make it run.(http://www.w3schools.com/php/php_ajax_livesearch.asp) i copy pasted the three code files that are in the website and when i click the html file all i get is an empty form box. Do i need to somehow link this with MySql? if so how do i got about doing this?

index.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 (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>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

livesearch.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 were found
// or to the correct values
if ($hint=="")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//output the response
echo $response;
?>

links.xml : 

<!-- Edited by XMLSpy® --><pages><link><title>HTML a tag</title><url>http://www.w3schools.com/tags/tag_a.asp</url></link><link><title>HTML br tag</title><url>http://www.w3schools.com/tags/tag_br.asp</url></link><link><title>CSS background Property</title><url>http://www.w3schools.com/cssref/css3_pr_background.asp</url></link><link><title>CSS border Property</title><url>http://www.w3schools.com/cssref/pr_border.asp</url></link><link><title>JavaScript Date Object</title><url>http://www.w3schools.com/jsref/jsref_obj_date.asp</url></link><link><title>JavaScript Array Object</title><url>http://www.w3schools.com/jsref/jsref_obj_array.asp</url></link></pages>

Thanks for any help

Was it helpful?

Solution

i copied this into text wrangler and saved in a folder in documents folder. None of this is in a webserver as i didnt think i would need it but was suprised when it didnt work.

PHP scripts are executed by a web server with the PHP engine installed. To properly execute livescript.php, first install web server software on your computer or rent hosting space from a hosting provider.

When you have obtained a web server, install your files in the directory referenced by your web server (often /home/<username>/public_html on Unix-based servers) and access your HTML script via: http://yourdomain.com/index.html.

OTHER TIPS

It seems that you are using simple javascript to send the ajax request it is much easier with jQuery. You do not have to check the browsers and many other things are simplified in jQuery. Now for the flow part.

1.An event has to occur as to trigger the ajax request. It can be anything like blur,focus,click,load,mouseout,mousein its your choice. code might look like this;

$($btn).click(function(){

insert your ajax request here

})

This says that the button has been clicked

2.call an ajax.

   $.ajax({

    url : "phpFile.php",

    data : dataYouwantToSend,

    success: function() {

    code to do if the call is successful
    }

    })

3.process the data in php file

in phpFile.php

whatever you echo or print in the php file is going to show up as response from the file.

for example if your php file only contain

echo "hello world";

response to your ajax request would be just hello world.

4.process the response in ajax success function

success : function (response){ //the variable in the function can be anything
alert(response);
}

above example will alert hello world

the whole code would look like this. this is the html file.

<input type="text" id="clickMe" />
<script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$("#clickMe").click(function(){
$.ajax({
url : "phpFile.php",
success : function(res) {
alert(res);
}
})
})
})
</script>

this is the php file phpFile.php

echo "Hello world";
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top