| tdprout |
10-15-2012 02:42 PM |
Using Javascript and Ajax to Refine My Search Results
Hello all....I've been searching all over for a solution to this problem.
I would like to refine the results of mysql query using dropdown boxes... live site is here:
http://www.halfwayenterprises.com/find_policy2.php
and here is the coding:
Code:
<!DOCTYPE HTML>
<html>
<head>
<!--[if lte IE 8 ]>
<script>
document.createElement("footer");
document.createElement("header");
</script>
<![endif]-->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.button
{
background-color: #0033ff;
color: #fff;
font-family: Verdana, Arial;
}
a:link {color:#0033FF;} /* unvisited link */
a:visited {color:#0033FF;} /* visited link */
a:hover {color:#0033FF;} /* mouse over link */
a:active {color:#0033FF;} /* selected link */
</style>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<form name="doublecombo" action="" method="POST">
<table border="1" cellpadding="10px" bgcolor="#CCCCCC">
<tr><td> <label for="status">Find in:</label>
<label for="current">
<input class="radio_style" id="current" checked="checked" name="status" type="radio" value="current">
Current
</label>
<label for="obsolete">
<input class="radio_style" id="obsolete" name="status" type="radio" value="obsolete">
Obsolete
</label>
<label for="both">
<input class="radio_style" id="both" name="status" type="radio" value="both">
Both
</label></td></tr>
<br />
<tr><td>
<label for="Category">By category:</label>
<select name="category" size="1" width="300" style="width: 300px" onChange="redirect(this.options.selectedIndex)">
<option value="null">Category</option>
<option value="asset management">Asset Management</option>
<option value="budget">Budget/Finance</option>
<option value="central office">Central Office</option>
<option value="client services/programs">Client Services/Programs</option>
<option value="cam">Customer Account Management</option>
<option value="dc">Design & Construction</option>
<option name="disposal" value="disposal">Disposal</option>
<option value="orm">Organization/Resource Management</option>
<option value="Procurement/Contracting">Procurement/Contracting</option>
<option value="real property acquisition">Real Property Acquisition</option>
<option value="real property management/lease administration">Real Property Management/Lease Administration</option>
</select>
<select name="subcategory" size="1"width="300" style="width: 300px" >
<option value="null">Sub-Category</option>
<option value="Portfolio">Portfolio</option>
<option value="Pricing">Pricing</option>
<option value="Valuation">Valuation</option>
<option value="Claims">Claims</option>
<option value="Financial Management">Financial Managementt</option>
<option value="Funding">Funding</option>
<option value="Internal Controls">Internal Controls</option>
<option value="Rent/Billling">Rent/Billling</option>
<option value="Central Office">Central Office</option>
<option value="Conferences">Conferences</option>
<option value="Child Care">Child Care</option>
<option value="Concessions">Concessions</option>
<option value="Delegations">Delegations</option>
<option value="Directives Management">Directives Management</option>
<option value="Historic Preservation">Historic Preservation</option>
<option value="Records Management">Records Management</option>
<option value="Reimbursable Services">Reimbursable Services</option>
<option value="Sustainable Design">Sustainable Design</option>
<option value="WorkPlace Programs">WorkPlace Programs</option>
<option value="Customer Account Management">Customer Account Management</option>
<option value="Accessibility">Accessibility</option>
<option value="Art in Architecture">Art in Architecture</option>
<option value="Border Stations">Border Stations</option>
<option value="Building Information Modeling">Building Information Modeling</option>
<option value="Courthouse Program">Courthouse Program</option>
<option value="Design Criteria and Guidelines">Design Criteria and Guidelines</option>
<option value="Design Excellence">Design Excellence</option>
<option value="Facilities Standards">Facilities Standards</option>
<option value="Fire Protection/Life Safety">Fire Protection/Life Safety</option>
<option value="Project Development">Project Development</option>
<option value="Project Management">Project Management</option>
<option value="Repairs and Alterations">Repairs and Alterations</option>
<option value="Security">Security</option>
<option value="Seismic">Seismic</option>
<option value="Urban Design">Urban Designt</option>
<option id="disposal" value="Disposal">Disposal</option>
<option value="Business Planning & Improvement">Business Planning & Improvement</option>
<option value="Communications/Branding">Communications/Branding</option>
<option value="External Relations and Inquiries">External Relations and Inquiries</option>
<option value="Correspondence Management">Correspondence Management</option>
<option value="Information Technology">Information Technology</option>
<option value="Management Controls">Management Controls</option>
<option value="Occupation Safety and Health">Occupation Safety and Health</option>
<option value="Telework">Telework</option>
<option value="Procurement">Procurement</option>
<option value="Procurement Instructional Bulletins">Procurement Instructional Bulletins</option>
<option value="Assignment & Utilization of Space">Assignment & Utilization of Space</option>
<option value="Lease Administration/Lease Policy">Lease Administration/Lease Policy</option>
<option value="Occupancy Services">Occupancy Services</option>
<option value="Site Acquisition">Site Acquisition</option>
<option value="Building Operations, Maintenance and Cleaning">Building Operations, Maintenance and Cleaning</option>
<option value="Emergency Preparedness">Emergency Preparedness</option>
<option value="Energy and Utilities">Energy and Utilities</option>
<option value="Enviroment">Enviroment</option>
<option value="Fire Protection/Life Safety">Fire Protection/Life Safety</option>
<option value="Health">Healtht</option>
<option value="Lease Administration">Lease Administration</option>
<option value="Naming Buildings">Naming Buildings</option>
<option value="Occasional Use of Public Space">Occasional Use of Public Space</option>
<option value="Recycling">Recycling</option>
<option value="Repairs and Alterations">Repairs and Alterations</option>
<option value="Security">Security</option>
</select>
<input name="submitted" class="button" type="submit" value="GO"></td></tr>
<br />
<tr><td>
By term:
<input type="text" name="find" placeholder="Search Term" />
<Select NAME="field">
<Option id="searchon" VALUE="null">Search On</option>
<Option id="title" VALUE="title">Title</option>
<Option id="poc" VALUE="poc">POC</option>
<Option id="purpose" VALUE="purpose">Purpose</option>
</Select>
<input type="hidden" name="searching" value="yes" />
<input name="submitted" class="button" type="submit" value="GO"><br /><br />
Refine:
<select name="office">
<option value="office">Sort by Office</option>
<option value="p">P</option>
<option value="pt">PT</option>
<option value="pf">PF</option>
</select>
</td></tr>
</form>
</table>
<br /><br />
<script>
<!--
/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/
var groups=document.doublecombo.category.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("Sub Category")
group[1][0]=new Option("Portfolio")
group[1][1]=new Option("Pricing")
group[1][2]=new Option("Valuation")
group[2][0]=new Option("Claims")
group[2][1]=new Option("Financial Management")
group[2][2]=new Option("Funding")
group[2][3]=new Option("Internal Controls")
group[2][4]=new Option("Rent/Billing")
group[3][0]=new Option("Central Office")
group[3][1]=new Option("Conferences")
group[4][0]=new Option("Child Care")
group[4][1]=new Option("Concessions")
group[4][2]=new Option("Delegations")
group[4][3]=new Option("Directives Management")
group[4][4]=new Option("Historic Preservation")
group[4][5]=new Option("Records Management")
group[4][6]=new Option("Reimbursable Services")
group[4][7]=new Option("Sustainable Design")
group[4][8]=new Option("WorkPlace Programs")
group[5][0]=new Option("Customer Account Management")
group[6][0]=new Option("Accessibility")
group[6][1]=new Option("Art in Achitecture")
group[6][2]=new Option("Border Stations")
group[6][3]=new Option("Building Information Modeling")
group[6][4]=new Option("Courthouse Program")
group[6][5]=new Option("Design Criteria and Guidelines")
group[6][6]=new Option("Design Excellence")
group[6][7]=new Option("Facilities Standards")
group[6][8]=new Option("Fire Protection/Life Safety")
group[6][9]=new Option("Project Development")
group[6][10]=new Option("Project Management")
group[6][11]=new Option("Repairs and Alterations")
group[6][12]=new Option("Security")
group[6][13]=new Option("Seismic")
group[6][14]=new Option("Urban Design")
group[7][0]=new Option("Disposal")
group[8][0]=new Option("Business Planning & Improvement")
group[8][1]=new Option("Communications/Branding")
group[8][2]=new Option("External Relations and Inquires")
group[8][3]=new Option("Correspondence Management")
group[8][4]=new Option("Information Technology")
group[8][5]=new Option("Management Controls")
group[8][6]=new Option("Occupation Safety and Health")
group[8][7]=new Option("Telework")
group[9][0]=new Option("Procurement")
group[9][1]=new Option("Procurement Instructional Bullentins")
group[10][0]=new Option("Assignment & Utilization of Space")
group[10][1]=new Option("Lease Administration/Lease Policy")
group[10][2]=new Option("Occupancy Services")
group[10][3]=new Option("Site Acquisition")
group[11][0]=new Option("Building Operations, Maintenance and Cleaning")
group[11][1]=new Option("Emergency Preparedness")
group[11][2]=new Option("Enviroment")
group[11][3]=new Option("Fire Protection/Life Safety")
group[11][4]=new Option("Health")
group[11][5]=new Option("Lease Administration")
group[11][6]=new Option("Naming Buildings")
group[11][7]=new Option("Occasional Use of Public Space")
group[11][8]=new Option("Recycling")
group[11][9]=new Option("Repairs and Alterations")
group[11][10]=new Option("Security")
var temp=document.doublecombo.subcategory
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
And the php mysql part:
Code:
<?php
require("config.php");
mysql_connect("localhost",$username,$password);
mysql_select_db($database) or die( "Unable to select database");
if(isset($_POST["submitted"])){
$status = $_POST['status'];
$category = $_POST['category'];
$office = $_POST['office'];
$field = @$_POST['field'] ;
$find = @$_POST['find'] ;
$searching = @$_POST['searching'] ;
echo '<div class="status_div">';
if($status=='current')
{
echo "<h2>Results</h2><p>";
$res = mysql_query("SELECT * FROM material WHERE status='$status' AND category='$category' ORDER BY `material`.`title` ASC Limit 0,30 ");
while ($row = mysql_fetch_assoc($res)) {
echo '<div class="current">';
echo
'<a href="'.$row['link'].'">'.$row['documentid'].' '.$row['status'].' '.$row['title'].'</a>'. '<br>'.
$row['office'].' '.' '.$row['date'].' '.' '.$row['poc'].','.' '.$row['telephone'].' '.
$row['email'].' '.' '.$row['purpose'];
echo '</div>';
echo '<br>';
}
exit;
//filter for CURRENT
if($_POST['type']){
$result = mysql_query("SELECT * FROM `material` WHERE status='current' AND office='$office' ORDER BY `material`.`office` ASC" );
while ($row = mysql_fetch_assoc($result))
echo
'<a href="'.$row['link'].'">'.$row['title'].'</a>'. '<br>'.$row['office'].' '.' '.$row['date'].' '.' '.$row['poc'].','.' '.$row['telephone'].' '.$row['email'].' '.' '.$row['purpose'];
echo '<br>';
}
} if ($status=='obsolete')
{
echo "<h2>Results</h2><p>";
$res = mysql_query("SELECT * FROM material WHERE status='$status' AND category='$category' ORDER BY `material`.`title` ASC ");
while ($row = mysql_fetch_assoc($res)) {
echo '<div class="obsolete">';
echo '<a href="'.$row['link'].'">'.$row['documentid'].' '.$row['status'] .$row['title'].'</a>'. '<br>'.
$row['office'].' '.' '.$row['date'].' '.' '.$row['poc'].','.' '.$row['telephone'].' '.
$row['email'].' '.' '.$row['purpose'];
echo '</div>';
echo '<br>';
}
//filter for OBSOLETE
} if ($status=='both')
{
echo "<h2>Results</h2><p>";
$res = mysql_query("SELECT * FROM material WHERE status1='both' AND category='$category' ORDER BY `material`.`title` ASC ");
while ($row = mysql_fetch_assoc($res)) {
echo '<div class="both">';
echo '<a href="'.$row['link'].'">'.$row['documentid'].' '.$row['status'] .$row['title'].'</a>'. '<br>'.
$row['office'].' '.' '.$row['date'].' '.' '.$row['poc'].','.' '.$row['telephone'].' '.
$row['email'].' '.' '.$row['purpose'];
echo '</div>';
echo '<br>';
}
}
//filter for BOTH
echo '</div>';
}
//This is only displayed if they have submitted the form
if ($searching =="yes")
{
echo "<h2></h2><p>";
//If they did not enter a search term we give them an error
if ($find == "")
{
echo "<a href='find_policy.php'>Clear Search</a>";
echo '<br>';
echo '<br>';
echo '<img src="images/footer.gif" width="935" height="50">';
exit;
}
// We preform a bit of filtering
$find = strtoupper($find);
$find = strip_tags($find);
$find = trim ($find);
//Now we search for our search term, in the field the user specified
if($status=='current'){
$data = mysql_query("SELECT * FROM material WHERE status='$status' AND lower($field) LIKE'%$find%' ORDER BY `material`.`title` ASC ");
while ($row = mysql_fetch_assoc($data)) {
echo '<div class="current">';
echo '<a href="'.$row['link'].'">' .$row['title'].'</a>'. '<br>'.
$row['office'].' '.' '.$row['date'].' '.' '.$row['poc'].','.' '.$row['telephone'].' '.
$row['email'].' '.' '.$row['purpose'];
echo '</div>';
echo '<br>';
}
}
if ($status=='obsolete'){
$data = mysql_query("SELECT * FROM material WHERE status='$status' AND lower($field) LIKE'%$find%' ORDER BY `material`.`title` ASC ");
while ($row = mysql_fetch_assoc($data)) {
echo '<div class="obsolete">';
echo'<a href="'.$row['link'].'">' .$row['title'].'</a>'. '<br>'.
$row['office'].' '.' '.$row['date'].' '.' '.$row['poc'].','.' '.$row['telephone'].' '.
$row['email'].' '.' '.$row['purpose'];
echo '</div>';
echo '<br>';
}
} if ($status=='both'){
$data = mysql_query("SELECT * FROM material WHERE status1='both' AND lower($field) LIKE'%$find%' ORDER BY `material`.`title` ASC ");
while ($row = mysql_fetch_assoc($data)) {
echo '<div class="">';
echo '<a href="'.$row['link'].'">' .$row['title'].'</a>'. '<br>'.
$row['office'].' '.' '.$row['date'].' '.' '.$row['poc'].','.' '.$row['telephone'].' '.
$row['email'].' '.' '.$row['purpose'];
echo '</div>';
echo '<br>';
}
}
//This counts the number or results - and if there wasn't any it gives them a little message explaining that
$anymatches=mysql_num_rows($data);
if ($anymatches == 0)
{
echo "Sorry, but we can not find an entry to match your query<br><br>";
}
//And we remind them what they searched for
echo "<b>Searched For:</b> " .$find;
}
//Filter
?>
</center>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>
Any help will be greatly appreciated |
