@import "http://lib.zetabin.com/jQuery/facebox/facebox.css";
|
Ajax Search
|
|
Topic Started: Aug 1 2008, 01:35 PM (126 Views)
|
|
JakkyD
|
Aug 1 2008, 01:35 PM
Post #1
|
|
- Posts:
- 72
- Group:
- Contributor
- Member
- #18
- Joined:
- Apr 29, 2008
|
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; }
|
|
|
| |
|
Admin
|
Aug 1 2008, 02:01 PM
Post #2
|
|
Administrator
- Posts:
- 303
- Group:
- Admins
- Member
- #1
- Joined:
- Mar 20, 2008
|
thanks im see which one is better (mine or yours)
|
|
|
| |
|
php-coder
|
Dec 11 2008, 10:57 PM
Post #3
|
|
- Posts:
- 134
- Group:
- Contributor
- Member
- #39
- Joined:
- Dec 8, 2008
|
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
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|