autocomplet using ajax -- some issues

[bindiya]

i am having a index page which shows all the students details on load.

In a box i have a refine search textbox,where the user can enter the students name and it does an autocompletion using ajax and php.

I get the result also,

but the datas which where showing at the time of page load is not hiding or replace by the search result,How can i do this hiding or replacing of the old datas by this search results,when the user does a refine search

 

pasting the code below

index.php
<style type="text/css">
#results{border:solid 1px #DEDEDE;background:#fff;display:none;}
#results ul, #results li{padding:0; margin:0; border:0; list-style:none;}
#results li {border-top:solid 1px #DEDEDE;}
#results li a{display:block; padding:4px; text-decoration:none; color:#000000; font-weight:bold;}
#results li a small{display:block; text-decoration:none; color:#999999; font-weight:normal;}
#results li a:hover{background:#FFFFCC;}
#results ul {padding:6px;}
</style>
<script type="text/javascript">
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

/* -------------------------- */
/* SEARCH                     */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'getlocations.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
var response = http.responseText;
e = document.getElementById('results');
if(response!=""){
e.innerHTML=response;
e.style.display="block";
} else {
e.style.display="none";
}
}
}

function GetValue(loc)
{

var userSelect = document.getElementById(loc).innerHTML;
document.getElementById('search-q').value = userSelect;
e = document.getElementById('results');
e.style.display="none";

}

</script>

<label for="user_location">Location</label>
<div style="float:right">
<input type="text" name="user_location" maxlength="100" id="search-q"
value=""  onkeypress="javascript:autosuggest()"  />

<div id="results"></div>
<div id="results1"></div>



</td></tr>
</table>
</font></p>
                                <p class="style19"><div id="results1"><?php

$var = 'ABC';
//$trimmed =addslashes( trim($var));
  $trimmed = trim($var); //trim whitespace from the stored variable

$pagename ='index.php';

$t1="SELECT * FROM students where name like '$trimmed' order by student_name  limit  $set_limit , $limit ";

$t = mysql_query($t1);

if(!$t){
die('Error quering the Database: ' . mysql_error());
}
$a = mysql_fetch_object($t);
$total_items = $a->cnt;
//echo 'Total Number of records in Database: '.$total_items;
//echo '<br/>';
$limit= (isset($_GET['limit'])) ? $_GET['limit'] : 20;
$page= (isset($_GET['page']))? $_GET['page'] : 1;
//echo 'This is Page Number: ' . $page . '<br/>';
//echo 'Current Limit: '. $limit. '<br/>';
if((!$limit) || (is_numeric($limit) == false)
|| ($limit < 20) || ($limit > 50)) {
$limit = 20; //default
}
//Set defaults if: $page is empty, non numerical,
//less than zero, greater than total available
if((!$page) || (is_numeric($page) == false)
|| ($page < 0) || ($page > $total_items)) {
$page = 1; //default
}
//calculate total pages
$total_pages =(ceil($total_items / $limit));
$set_limit = ($page * $limit) - $limit;
//echo 'Total Pages: '.$total_pages .'<br/>';

$q1="SELECT * FROM students where name like '$trimmed' order by student_name  limit  $set_limit , $limit ";

$q = mysql_query($q1);
if(!$q) die(mysql_error());
$no_row = mysql_num_rows($q);
if($no_row == 0) die('Dispalyed in page 1;');// No matches met your criteria.');
//Results per page: 
//echo "limit is".$limit;
/*echo('<br/>Records Per Page:
<a href='.$pagename.'?limit=10&page=1&emir='.$emi.'>
10</a> |
<a href='.$pagename.'?limit=25&page=1&emir='.$emi.'>
25</a> |
<a href='.$pagename.'?limit=50&page=1&emir='.$emi.'>
50</a><br/>
');*/
//echo "<div>";/*<table>*/
$count=1;
$i=1;
while($row = mysql_fetch_array($q)) {
//print your data here.

if($row[2]==0){
  $imgstar='';
 }
  else if($row[2]==1){
 $imgstar="<img src='star.gif' alt='*' title=''>";
 }
 else if($row[2]==2){
 $imgstar="<img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''>";
 }
 else if($row[2]==3){
 $imgstar="<img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''>";
 }
 else if($row[2]==4){
 $imgstar="<img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''>";
 }
 else if($row[2]==5){
 $imgstar="<img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''><img src='star.gif' alt='*' title=''>";
 }
 echo"<DIV class=outbox><DIV class=floatLeft><IMG border=0 alt='' src='hleft.jpg'></DIV>";
 echo"<DIV class=hTitle>$row[student_name]</DIV><DIV class=floatLeft><IMG border=0 
alt='' 
src='more-detail.jpg'></A></DIV><DIV class=rBar></DIV>";
/*echo"<DIV class=hTitle>$row[student_name]</DIV><DIV class=rBar></DIV>";*/
 echo"<DIV class=list><TABLE border=0 cellSpacing=0 cellPadding=2 width='600' align=left ><TBODY>  <TR><TD colspan=2 style='COLOR: #996666' vAlign=top noWrap>City:<STRONG> Abu Dhabi</STRONG>    Location:<STRONG> $row[3]</STRONG>  </TD><TD vAlign=top noWrap align=left> $imgstar  </TD>    <TD vAlign=top rowSpan=7 ><img width='88' height='88' src=$row[4]> </TD></TR>
  <TR> <TD style='COLOR: #996666'colSpan=3>$row[student_features]<br><A style='FONT-SIZE: 12px' href='$row[a_link]' class='style26'>$click</A> </TD></TR></TBODY></TABLE></DIV></DIV>";
  $i++;
  }
//  $count++;$count  <DIV class=floatLeft></div>
//echo"  </div>";

//Results Per Page: Same as earlier one
/*echo('<br/>Records Per Page:
<a href='.$pagename.'?limit=10&page=1&emir='.$emi.'>
10</a> |
<a href='.$pagename.'?limit=25&page=1&emir='.$emi.'>
25</a> |
<a href='.$pagename.'?limit=50&page=1&emir='.$emi.'>
50</a><br/>
');*/
//prev. page
$prev_page = $page -1;
if($prev_page >= 1) {
echo('<b><<</b> <a href='.$pagename.'?limit='.$limit.'&page='.$prev_page.'&emir='.$emi.'>
<b>Prev.</b></a>');
}
//Display middle pages: 
for($a = 1; $a <= $total_pages; $a++)
{
if($a == $page) {
echo('<b>' .$a.'</b> | '); //no link
}

else {
echo('<a href='.$pagename.'?limit='.$limit.'&page='.$a.'&emir='.$emi.'> '.$a.'</a> | ');
}
}
//Next page:
$next_page = $page + 1;
if($next_page <= $total_pages) {
echo('
<a href='.$pagename.'?limit='.$limit.'&page='.$next_page.'&emir='.$emi.'><b>Next</b></a> > >');
}


//}

?>
getlocation.php
$searchq        =    strip_tags($_GET['q']);
$q1="SELECT * FROM students where name like '$trimmed' order by student_name  limit  $set_limit , $limit ";
$Record        =    mysql_query($sql);
$i=1;
if(strlen($searchq)>0){
echo '<ul>';
while ($row = mysql_fetch_array($Record)) {?>


<?php
 echo"<DIV class=outbox><DIV class=floatLeft><IMG border=0 alt='' src='hleft.jpg'></DIV>";
 echo"<DIV class=hTitle>$row[student_name]</DIV><DIV class=floatLeft><IMG border=0 
alt='' 
src='more-detail.jpg'></A></DIV><DIV class=rBar></DIV>";
/*echo"<DIV class=hTitle>$row[student_name]</DIV><DIV class=rBar></DIV>";*/
 echo"<DIV class=list><TABLE border=0 cellSpacing=0 cellPadding=2 width='600' align=left ><TBODY>  <TR><TD colspan=2 style='COLOR: #996666' vAlign=top noWrap>City:<STRONG> Abu Dhabi</STRONG>    Location:<STRONG> $row[3]</STRONG>  </TD><TD vAlign=top noWrap align=left> $imgstar  </TD>    <TD vAlign=top rowSpan=7 ><img width='88' height='88' src=$row[4]> </TD></TR>
  <TR> <TD style='COLOR: #996666'colSpan=3>$row[student_features]<br><A style='FONT-SIZE: 12px' href='$row[a_link]' class='style26'>$click</A> </TD></TR></TBODY></TABLE></DIV></DIV>";
  $i++;
  }
echo '</ul>';
} 

?>
  <div class='results1'><?php   ?></div>