Welcome Guest [Log In] [Register]
Add Reply
Ajax Search
Topic Started: Aug 1 2008, 01:35 PM (126 Views)
JakkyD
Member Avatar

Using the tutorial here I came up with this:




The form:

search.php

Code:
 

<?
include ("include/session.php");

$userid = $_SESSION['userid'];
$getuser = mysql_query("SELECT * FROM `users` WHERE `userid`='$userid'");
?>
<html><head><title>AJAX Search</title>
<script src="jssearch.js"></script>
</head>
<body>
<div align=center><br /><br />
<input type=text style="background-color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;" name=search-username onkeypress="search(this.value);" /><br /><hr />
<strong>
<div id=txtHint> </div>
</strong>
</div>
</body>
</html>


The result of the form:

searchresult.php

Code:
 

<?php
$q= $_GET["q"];
include ("include/session.php");
$sql="SELECT * FROM `users` WHERE username LIKE '%$q%'"; ?>

<style type="text/css">
a {font-family:Arial, Helvetica, sans-serif; font-size:14px ;color:#FFFFFF; text-decoration:none;}
a:hover {color:#CCCCCC;}
p {font-family:Arial, Helvetica, sans-serif;}
</style>

<?php
$result = mysql_query($sql);
$check= mysql_num_rows($result);

if ($check == "0" || !isset($q)){
echo "<p>No user was found!</p>";
}else{

echo "<table border='1' bordercolor=black frame=box rules=all cellpadding=0 cellspacing=0 align=center bgcolor=#333333 width=25%>
<tr bgcolor=#cccccc>
<th><div align=center><p>Username</p></div></th>
</tr>";

while($row = mysql_fetch_array($result)){
echo "<tr>";
$usersname= $row['username'];
echo "<td><div align=center><a href='userinfo.php?user=$usersname'>$usersname</a></div></td>";
echo "</tr>";
}
echo "</table>";
}
?>


Lastly the javascript:

jssearch.js

Code:
 

// JavaScript Document
var xmlHttp

function search(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="searchresult.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Offline Profile Quote Post Goto Top
 
Admin
Administrator
thanks im see which one is better (mine or yours)
Offline Profile Quote Post Goto Top
 
php-coder
Member Avatar

Ok guys if you dont want the search resultsa to make your page content be pushed down the page use this code it will make your results hover above your actual page content,


Code:
 

<?
include ("include/session.php");

$userid = $_SESSION['userid'];
$getuser = mysql_query("SELECT * FROM `users` WHERE `userid`='$userid'");
?>
<html><head><title>AJAX Search</title>
<script src="js/jssearch.js"></script>
<style type="text/css">
#users { width: 500px; height:100%: margin:0 auto; background: white; }
#content {
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>

<div id="users">
<div align=center><br /><br />
<input type=text style="background-color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;" name=search-username onkeypress="search(this.value);" /><br /><hr />
<strong>
<div id=txtHint></div>
</div>

<div id="content">
Put your web content in here
</div>

</body>
</html>


~Pc
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Other · Next Topic »
Add Reply