CodingForums.com - AJAX Live Search w/ PHP/MySQL

Patience is a virtue, but I was unable to figure this out. I'd still like to, but I settled with the intended output of the script and just styled it a great deal to fit the rest of the website, which actually turned out alright.

Code:

$output .= '<div id="wrapper"><div id="content"><div id="comp"><img src='.$comp .'></div> <div id="gamename"><a href="'. $editlink .'">' . $displayName . '</a></div><center><div id="region"><img src='.$region .'></div><div id="modes">' . $mode . '</div><div id="vmc">' . $vmc . '</div><div id="smb">' . $smb . '</div> <div id="hdd">' . $hdd . '</div><div id="usb">' . $usb . '</div></center><div id="notes">&nbsp;' . $notes . '</div></div></div>';

can see it @ http://oplinfo.hj.cx/insert.php by entering text into the Game Name field.

Though I'd still like to use this script for other things, and I'm still not sure how to make the search results appear like a z-index div appears (over everything else).

Here is the HTML for the page, as you asked

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link href="css/everything.css" rel="stylesheet" type="text/css" />

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<script src="js/script.js"></script>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="Public Submission Open PS2 Loader (OPL) Game Compatibility List" />

<meta name="keywords" content="opl, open ps2 loader, playstation 2, play, station, 2, sony playstation 2, sony ps2, opl game compatibility list, open ps2 loader game compatibility list, open, ps2, loader, game, compatibility, list" />

<meta name="robots" content="index,nofollow" />

<title>ALL - OPL Game Compatability</title>

<style type="text/css">

        #searchresults {

        margin-left:auto;

    margin-right:auto;

    width:845;

        }

        .searchresults {

        margin-left:auto;

    margin-right:auto;

    width:800;

        }        

</style>



</head>

<body><center><script language="javascript" src="http://www.cpmfun.com/getad.php?40790;71973;728x90"></script><br/><img src="/files/images/logo.gif" /><br />

<div id="menu">

  <ul id="Menu" class="MenuBarHorizontal">

    <li><a class="MenuBarItemSubmenu" href="index.php">List Menu</a>

      <ul>

        <li><a href="#" class="MenuBarItemSubmenu">Add Games</a>

          <ul>

            <li><a href="insert.php">Tested Game</a></li>

            <li><a href="insert_untested.php">Untested Game</a></li>

          </ul>

        </li>

        <li><a href="untested.php">View Untested</a></li>

        <li><a href="gclist.php">View GC List</a></li>

      </ul>

    </li>

    <li><a href="#" class="MenuBarItemSubmenu">Art</a>

      <ul>

        <li><a href="https://www.box.com/s/apehhz3hnsnwnwx1277p" title="Download OPL Cover Art">Cover Art</a></li>

        <li><a href="https://www.box.com/s/ifxm5p2q491pnctnqo0s" title="Download OPL Disc Art">Disc Art</a></li>

        <li><a href="https://www.box.com/s/qlzg588bwh3urw5h3i5n" title="Download OPL Background Art">BG Art</a></li>

      </ul>

    </li>

    <li><a href="/wiki" title="Visit the OPL Information Wiki" class="MenuBarItemSubmenu">Wiki</a>

      <ul>

        <li><a href="/wiki/doku.php?id=start&amp;do=register" title="Register on the Wiki">Register</a></li>

        <li><a href="/wiki/doku.php?id=fmcb" title="Free MCBoot Information" class="MenuBarItemSubmenu">Free MC Boot</a>

          <ul>

            <li><a href="/wiki/doku.php?id=fmcb:install" title="Install Free MCBoot on your PS2">Install</a></li>

          </ul>

        </li>

        <li><a href="/wiki/doku.php?id=homebrew:opl" title="Open PS2 Loader Information" class="MenuBarItemSubmenu">Open PS2L</a>

          <ul>

            <li><a href="/wiki/doku.php?id=homebrew:opl:config:usb" title="USB Configuration Info">USB</a></li>

            <li><a href="/wiki/doku.php?id=homebrew:opl:config:internal" title="HDD Configuration Info">HDD</a></li>

            <li><a href="/wiki/doku.php?id=homebrew:opl:config:smb" title="SMB Configuration Info">SMB</a></li>

          </ul>

        </li>

      </ul>

    </li>

  </ul>

  <form id="searchregion" name="searchdb" method="post" action="search.php">

      Region: 

      <select name="searchregion" id="searchregion" class="search">

      <option value="/files/images/" selected="selected">All</option>

      <option value="/files/images/U.png">NTSC-U</option>

      <option value="/files/images/J.png">NTSC-J</option>

      <option value="/files/images/E.png">PAL</option>

      <option value="/files/images/O.png">OTHER</option>

      </select>

      &nbsp;&nbsp;&nbsp;Game Name:

      <input type="text" name="search" id="search" class="search" />

    <input type="submit" name="submit" id="submit" value="Filter" class=""/><br />

  </form>

</div></center>

<div id="wrapper">

<div id="searchResults"></div><br />

<table width="830" border="0" bgcolor="#003131" align="center"><form action="insert_action.php" method="post" name="form1" id="form1" onSubmit="return checkAll('message');">

  <tr>

    <td width="174" height="38" bgcolor="#003a39"><strong>&nbsp;&nbsp;Game Name / Game Code</strong></td>

    <td width="438" bgcolor="#003a39">&nbsp;&nbsp;<input name="gamename" type="text" id="gname" size="40" maxlength="40" onkeyup="liveSearch()" autocomplete="off"/>

      <input name="gamecode" type="text" id="gcode" size="10" maxlength="11"/><br /></td>

    <td width="204" bgcolor="#003a39">&nbsp;For gamecode: <a href="http://www.sonyindex.com/index.htm">Sony Index</a><br />

    &nbsp;ABCD-12345 or ABCD_123.45 = OK</td>

  </tr>

    <tr>

    <td height="39" bgcolor="#003a39"><strong>&nbsp;&nbsp;Region</strong></td>

    <td bgcolor="#003a39">&nbsp;&nbsp;NTSC-U <img src="/files/images/U.png" /><input type="radio" name="region" id="ntscu" value="/files/images/U.png"/>&nbsp;&nbsp;

            NTSC-J <img src="/files/images/J.png" /><input type="radio" name="region" id="ntscj" value="/files/images/J.png" />&nbsp;&nbsp;

            PAL <img src="/files/images/E.png" /><input type="radio" name="region" id="pal" value="/files/images/E.png" />&nbsp;&nbsp;

            OTHER <img src="/files/images/O.png" /><input type="radio" name="region" id="other" value="/files/images/O.png" /></td>

    <td bgcolor="#003a39">&nbsp;If you select &quot;OTHER&quot;, please &nbsp;specify in notes.</td>

  </tr>

  <tr>

    <td height="34" bgcolor="#003a39"><strong>&nbsp;&nbsp;Result</strong></td>

    <td bgcolor="#003a39"><strong>&nbsp;&nbsp;</strong>Compatible <img src="/files/images/comp.gif" /><input type="radio" name="comp" id="compatible" value="/files/images/comp.gif"/>&nbsp;&nbsp;

            Incompatible <img src="/files/images/incomp.gif" /><input type="radio" name="comp" id="incompatible" value="/files/images/incomp.gif" />&nbsp;&nbsp;

            Issues <img src="/files/images/issues.gif" /><input type="radio" name="comp" id="issues" value="/files/images/issues.gif" />&nbsp;&nbsp;

            Game Finished <img src="/files/images/completed.gif" /><input type="radio" name="comp" id="completed" value="/files/images/completed.gif" />

    <td bgcolor="#003a39">&nbsp;Does it work? no? some probs? &nbsp;Perhaps you beat the game.</td>

  </tr>

    <tr>

    <td height="35" bgcolor="#003a39"><strong>&nbsp;&nbsp;VMC Support</strong></td>

    <td bgcolor="#003a39">&nbsp; Virtual Memory Card <input type="radio" name="vmc" id="virtualmc" value="VMC" />&nbsp;&nbsp;&nbsp;Physical Memory Card <input type="radio" name="vmc" id="physicalmc" value="MC"/>&nbsp;&nbsp;&nbsp;N/A <input type="radio" name="vmc" id="namc" value="-"/></td>

    <td bgcolor="#003a39">&nbsp;PMC = VMC NOT SUPPORTED.</td>

  </tr>

  <tr>

    <td height="34" bgcolor="#003a39"><strong>&nbsp;&nbsp;Load Methods</strong></td>

    <td bgcolor="#003a39">&nbsp;      

      SMB (Network)

        <input type="checkbox" name="smb" id="SMB" value="SMB" /> 

      &nbsp;&nbsp;

      USB (HDD/UFD)

      <input type="checkbox" name="usb" id="USB" value="USB" />

      &nbsp;&nbsp;

      HDD (PS2 Internal)

      <input type="checkbox" name="hdd" id="HDD" value="HDD" /></td>

    <td bgcolor="#003a39">&nbsp;Your tested load method(s).</td>

  </tr>

  <tr>

    <td height="37" bgcolor="#003a39"><strong>&nbsp;&nbsp;Modes</strong></td>

    <td bgcolor="#003a39">&nbsp;&nbsp;1<input type="checkbox" name="mode[]" id="mode1" value="1" />&nbsp;&nbsp;

 2<input type="checkbox" name="mode[]" id="mode2" value="2" />&nbsp;&nbsp;&nbsp;

 3<input type="checkbox" name="mode[]" id="mode3" value="3" />&nbsp;&nbsp;&nbsp;

 4<input type="checkbox" name="mode[]" id="mode4" value="4" /> &nbsp;&nbsp;&nbsp;

 5<input type="checkbox" name="mode[]" id="mode5" value="5" />&nbsp;&nbsp;&nbsp;

 6<input type="checkbox" name="mode[]" id="mode6" value="6" />&nbsp;&nbsp;&nbsp;

 7<input type="checkbox" name="mode[]" id="mode7" value="7" />&nbsp;&nbsp;&nbsp;

 8<input type="checkbox" name="mode[]" id="mode8" value="8" /></td>

    <td bgcolor="#003a39">&nbsp;Any required compatibility modes.</td>

  </tr>

  <tr>

    <td height="37" bgcolor="#003a39"><strong>&nbsp;&nbsp;Notes</strong></td>

    <td bgcolor="#003a39">&nbsp;&nbsp;<input name="notes" type="text" id="NOTES" size="55" maxlength="35"><br /></td>

    <td bgcolor="#003a39">&nbsp;Specific notes/comments.</td>

  </tr>

  <tr>

    <td><input type="submit" name="Submit" value="Submit" /></td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td height="38" bgcolor="#003131">&nbsp;</td>

    <td bgcolor="#003131"><strong><div id="message" class="messagecss"></div></strong></td>

  </tr>

</form></table><br /><br />

</div>

<script type="text/javascript">

var Menu = new Spry.Widget.MenuBar("Menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

<script type="text/javascript">

function createRequestObject(){

var request_o;

var browser = navigator.appName;

if(browser == "Microsoft Internet Explorer"){

request_o = new ActiveXObject("Microsoft.XMLHTTP");

}else{

request_o = new XMLHttpRequest();

}

return request_o;

}



var http = createRequestObject(); 



function liveSearch()

{

var url = "livesearch.php";

var s = document.getElementById('gname').value;

var params = "&s="+s;

http.open("POST", url, true);



http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.setRequestHeader("Content-length", params.length);

http.setRequestHeader("Connection", "close");



http.onreadystatechange = function() {

if(http.readyState == 4 && http.status != 200) {

document.getElementById('searchResults').innerHTML='<li>Loading...</li>';

}

if(http.readyState == 4 && http.status == 200) {

document.getElementById('searchResults').innerHTML = http.responseText; 

} 

}

http.send(params);

}



function sendToSearch(str){

document.getElementById('gname').value = str;

document.getElementById('searchResults').innerHTML = "";

}

</script>

</body>

</html>

You can see the onkeyup=livesearch() on the gamename input. Basically, when that livesearch takes place, I want the results to appear the same way that an auto complete form suggests things.. like when you google search, or how facebook drops down people suggestions below the search bar, but indexed above everything else... I was able to accomplish that same style using a z-index div, but the div does not disappear after the text in the field is cleared, it just stays hovering over the page and blocks the view of anything under it. There must be a way to accomplish this within the AJAX or PHP, no?