Jump to content

PHP and AJAX live search


AleXiC94

Recommended Posts

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:

e943077dc07d407280283c1684f0ffe4.png

After i type in a single letter this happens:

990a834fa8e04dcba6c307b790149a77.png

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.

0f6f5bd1703846e8900d57bbd8af6cce.png

Edited by AleXiC94
Link to comment
Share on other sites

Your form is inside a div called "livesearch", and your Javascript function clears out the contents of that div and replaces it with the search results. That's going to remove the form.

Thank you sir that fixed the form disappearing, but this the problem im facing now, how to make the search results display on top of everything else and not resize and duplicate my header with the Electronic Design logo?

i've tried setting z-index of the livesearch div to the maximum and setting z-index of other tags to lower numbers but it doesnt seem to be working:

b097318ba63442098319e62f16475198.png

Link to comment
Share on other sites

If you wrap all the links in an element and set the position of that element to absolute it won't affect the height of its parent container.

Link to comment
Share on other sites

If you wrap all the links in an element and set the position of that element to absolute it won't affect the height of its parent container.

Im not sure i understand what you mean by links here, but this is what the code looks like now, could you help me correct it?

 

<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;
}
   livesearch {
            width:240px;
            color:green;
            position: relative;
            z-index: 999999;
         }
</style>

<body background="images/osnovne_slike/pozadina01.gif" vlink="#0000FF" link="#0000FF" alink="#808080" style="background-attachment: fixed">
<center>
<table style="z-index: 9;" border="0" width="990" cellspacing="0" cellpadding="0" background="images/slike_index/header_home.png">
    <tr>
    <td width="600" height="46">
        <form class="form2" style=" z-index: 9999;  float: right;" action="livesearch.php" method="get">
        <input class="input2" type="search" onkeyup="showResult(this.value)" placeholder="Pretrazi..">
            <div id="livesearch"></div>
	</form>
    </td>
Link to comment
Share on other sites

Give livesearch position: absolute; this will cause it to be taken out of flow from other elements, it will extend down with content but will not push down increasing height of row, similar to a dropdown menu, you could apply fixed height and apply overflow-y: auto; which will show scrollbar once height extends beyond fixed height.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...