hello im new to the website and web programming in general, im in need of assistance with your w3schools official AJAX live search tutorial, i've copied the code to the right files, livesearch.php and index.html, which are placed in my htdocs folder and the apache server is running well. I know my code has css issues but i need to fix something else, mainly this:
This is my search form, located in a table, inside a div tag:
After i type in a single letter this happens:
The search box disappears, instead of auto completing the word as long as i type.
And even these results are shown below the "A7 Embedded PC" image, even tho my form has a z-index set to 9999.
This is my livesearch.php code:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
$q=$_GET["q"];
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) {
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>";
}
}
}
}
}
if ($hint=="") {
$response="Nema rezultata!";
} else {
$response=$hint;
}
echo $response;
?>
And this is my index.html code fragment that contains the form:
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
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 background="images/osnovne_slike/pozadina01.gif" vlink="#0000FF" link="#0000FF" alink="#808080" style="background-attachment: fixed">
<div align="center">
<center>
<table border="0" width="990" cellspacing="0" cellpadding="0" background="images/slike_index/header_home.png">
<tr>
<td width="600" height="46">
<div id="livesearch" style=" height:46px; z-index: 9996; float: right;">
<form class="form2" style=" z-index: 9999" action="livesearch.php" method="get">
<input class="input2" type="search" onkeyup="showResult(this.value)" placeholder="Pretrazi..">
</form>
</div>
</td>
and some css for the form and input:
<style>
.form2 {
font-family: 'Open Sans', sans-serif;
vertical-align: :bottom;
color:#848484;
width:170spx;
padding:4px 4px 4px 4px;
margin:8px 5px 5px 5px;
line-height: 15px;
border-radius:1px;
background:#f2f2f2;
}
::-webkit-input-placeholder { color: #acacac;}
.input2 {
margin:0px 1px;
border:none;
background-color:#fafafa;
background-repeat:no-repeat;
background-size:45px 45px;
background-position:left center;
height:19px;
width:169px;
vertical-align:bottom;
text-align: left;
font-size:16px;
border-radius:2spx;
}
</style>
I dont know what is causing the php to display all the results at once, while the code is completely copy-pasted from w3schools website. If anyone can help me with this i'd be very grateful.
UPDATE: i have placed the w3schools code in separate files and ran them in a browser using my xml document and the search is running fine, something on my website seems to be preventing the autocomplete.