PDA

View Full Version : AJAX MYSQL Search



christianbroger
26 Jul 2010, 10: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;
?>