Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    39
    Thanks
    14
    Thanked 0 Times in 0 Posts

    AJAX Live Search w/ PHP/MySQL

    I've been playing around with some AJAX, and found a nice tutorial on creating live searches using PHP and MySQL.

    I've got this script working, but I'd like to modify it.. Currently, the search results return in a <ul> (searchResults), and it stretches the containing div. I'd like it to instead appear above the rest of the form. Could this be done efficiently using CSS? I've tried some things with only half success.

    I'm also trying to not perform the search until at least 3 characters are entered into the text field.

    Code:
    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 = "";
    }
    PHP Code:
    <?php
    require_once('connection.php');
    if(isset(
    $_POST['gamename'])) {
    $gamename mysqli_real_escape_string($link$_POST['gamename']);}
    $tbl_name="opl_comp";
    $s $_REQUEST["s"];
    $output "";
    $s str_replace(" ""%"$s);
    $sql="SELECT * FROM $tbl_name WHERE gamename LIKE '%" $s "%' ORDER BY gamename";
    $result=mysqli_query($link,$sql);
    if((
    mysqli_num_rows($result) != 0) && ($s != "")){
    while(
    $rows mysqli_fetch_array($resultMYSQLI_BOTH))
    {
    $displayName $rows["gamename"];
    $rowsID = ($rows["id"]); 
    $region = ($rows["region"]);
    $editlink "update.php?game_id=$rowsID";
    $output .= '<li><img src='.$region .'> <a href="'$editlink .'">' $displayName '</a></li>';
    }
    }    

    echo 
    $output;
    echo 
    "";
    ?>
    Any tip appreciated!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    This line
    Code:
    document.getElementById('searchResults').innerHTML = http.responseText;
    Found near the end of the liveSearch() function tells you where to put the http.responseText( what is echoed back from the php).

    You need to make a div where you want the text to go, place it's id where you see searchResults. Maybe change
    Code:
    document.getElementById('searchResults').innerHTML='<li>Loading...</li>';
    to just
    Code:
    document.getElementById('searchResults').innerHTML='Loading...';
    Then go to the php and change this line
    PHP Code:
    $output .= '<li><img src='.$region .'> <a href="'$editlink .'">' $displayName '</a></li>'
    To:
    PHP Code:
    $output .= '<img src='.$region .'> <a href="'$editlink .'">' $displayName '</a>'

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    39
    Thanks
    14
    Thanked 0 Times in 0 Posts
    I'm not looking to remove the bullets, I'm looking to echo the output outside of it's containing div. Much like the effect of using CSS and z-index to lift the div away from the page, as not to disrupt the rest of the content.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Huh?

    Never saw 3D on a web page. Joking aside give us the html of the page please.

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    39
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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?
    Last edited by bemore; 02-24-2013 at 05:16 AM.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    bemore you do know that there is a difference between #searchresults and #searchResults?

    Try this: In the css add
    Code:
    #searchResults{
    	position:absolute;
    	top: 230px;
    	left: 210px;
    	z-index: 100;
        width:845;
    	background-color: pink;
    	display:none;
    }
    And doctor this
    Code:
    if(http.readyState == 4 && http.status == 200) {
    document.getElementById('searchResults').innerHTML = http.responseText;
    document.getElementById('searchResults').style.display = "block"; <= ADD
    With a little luck the info should pop up like you want. Use the css top and left to position it where you want it.
    Last edited by sunfighter; 02-26-2013 at 02:48 PM.

  • #7
    New to the CF scene
    Join Date
    Feb 2013
    Location
    new delhi
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi All !

    Such type of queries you can check link....
    http://www.scriptcs.com/Lesson/php/p...search.asp.htm

    regards
    prem


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •