christianbroger
26 Jul 2010, 11:48 AM
I am currently trying to put together a AJAX search that searches a MySQL database using PHP. I have created the below scripts. I cannot get it to function properly. Essentially I want someone to type in a partial search term and click submit and see the results. The purpose of this is for it to become part of a mobile app. Any help would be appreciated. Thank you!
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{font-family:'Lucida Grande', Verdana, sans-serif;; font-size:14px; color:#666666;}
h2{color:#000000; margin-bottom:20px;}
h3{color:#000000; font-size:14px;}
input{font-size:16px; color:#444444;}
a:link, a:visited, a:hover{color:#0033CC;}
a:hover{text-decoration:none;}
div.searchInput{padding:8px; background:#DEDEDE; clear:both;}
div.footer{padding:6px; border-top:solid 1px #DEDEDE; font-size:10px;}
#msg{background:#FFFFCC; margin-bottom:10px; padding:4px; display:none;}
</style>
<script type="text/javascript">
function showProducts(str)
{
if (str=="")
* {
* document.getElementById("search-result").innerHTML="";
* return;
* }
if (window.XMLHttpRequest)
* {// code for IE7+, Firefox, Chrome, Opera, Safari
* xmlhttp=new XMLHttpRequest();
* }
else
* {// code for IE6, IE5
* xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
* }
xmlhttp.onreadystatechange=function()
* {
* if (xmlhttp.readyState==4 && xmlhttp.status==200)
*** {
*** document.getElementById("search-result").innerHTML=xmlhttp.responseText;
*** }
* }
xmlhttp.open("GET","search.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form id="searchForm" name="searchForm" method="post" action="javascript:searchNameq();">
<div class="searchInput">
<input name="searchq" type="text" id="searchq" size="30" onkeyup="javascript:showProducts()"/>
<input type="button" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:showProducts()"/>
</div>
</form>
<h3>Search Results</h3>
<div id="msg">Type something into the input field</div>
<div id="search-result"></div>
</body>
</html>
PHP:
<?php
$q=$_GET["q"];
//connect to the database
mysql_connect("christianbrogers.db.5646816.hostedresource.com","christianbrogers","GHbn123");
mysql_select_db("christianbrogers");
//explode our search term into separate words
$search_exploded = explode(" ",$search);
foreach($search_exploded as $search_each)
{
//construct the query
$x++;
if ($x==1)
$construct .= "name LIKE '%$search_each%'";
else
$construct .= " OR name LIKE '%$search_each%'";
}
//echo out the constructed query
$construct = "SELECT * FROM products WHERE $construct";
$run = mysql_query($construct);
$foundnum = mysql_num_rows($run);
if ($foundnum==0)
echo "No results found.";
else
{
while ($runrows = mysql_fetch_assoc($run))
{
//get data
$name = $runrows['name'];
echo $name;
?>
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{font-family:'Lucida Grande', Verdana, sans-serif;; font-size:14px; color:#666666;}
h2{color:#000000; margin-bottom:20px;}
h3{color:#000000; font-size:14px;}
input{font-size:16px; color:#444444;}
a:link, a:visited, a:hover{color:#0033CC;}
a:hover{text-decoration:none;}
div.searchInput{padding:8px; background:#DEDEDE; clear:both;}
div.footer{padding:6px; border-top:solid 1px #DEDEDE; font-size:10px;}
#msg{background:#FFFFCC; margin-bottom:10px; padding:4px; display:none;}
</style>
<script type="text/javascript">
function showProducts(str)
{
if (str=="")
* {
* document.getElementById("search-result").innerHTML="";
* return;
* }
if (window.XMLHttpRequest)
* {// code for IE7+, Firefox, Chrome, Opera, Safari
* xmlhttp=new XMLHttpRequest();
* }
else
* {// code for IE6, IE5
* xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
* }
xmlhttp.onreadystatechange=function()
* {
* if (xmlhttp.readyState==4 && xmlhttp.status==200)
*** {
*** document.getElementById("search-result").innerHTML=xmlhttp.responseText;
*** }
* }
xmlhttp.open("GET","search.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form id="searchForm" name="searchForm" method="post" action="javascript:searchNameq();">
<div class="searchInput">
<input name="searchq" type="text" id="searchq" size="30" onkeyup="javascript:showProducts()"/>
<input type="button" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:showProducts()"/>
</div>
</form>
<h3>Search Results</h3>
<div id="msg">Type something into the input field</div>
<div id="search-result"></div>
</body>
</html>
PHP:
<?php
$q=$_GET["q"];
//connect to the database
mysql_connect("christianbrogers.db.5646816.hostedresource.com","christianbrogers","GHbn123");
mysql_select_db("christianbrogers");
//explode our search term into separate words
$search_exploded = explode(" ",$search);
foreach($search_exploded as $search_each)
{
//construct the query
$x++;
if ($x==1)
$construct .= "name LIKE '%$search_each%'";
else
$construct .= " OR name LIKE '%$search_each%'";
}
//echo out the constructed query
$construct = "SELECT * FROM products WHERE $construct";
$run = mysql_query($construct);
$foundnum = mysql_num_rows($run);
if ($foundnum==0)
echo "No results found.";
else
{
while ($runrows = mysql_fetch_assoc($run))
{
//get data
$name = $runrows['name'];
echo $name;
?>