homepage Welcome to WebmasterWorld Guest from 23.20.19.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Refining Search Results
tdprout




msg:4507458
 3:01 pm on Oct 12, 2012 (gmt 0)

Basically I would like to be able to refine my search results using drop down boxes. The active link is
[halfwayenterprises.com...]

Here is the html portion:


<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<form name="doublecombo" id="doublecombo">
<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" id="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="submitted2" id="submitted2" class="button" type="submit" value="GO"><br />
Refine:
<select name="filter1">
<option value="az">Sort by A-Z</option>
<option value="date">Sort by Date</option>
</select>

<select name="filter2">
<option value="p" >P</option>
<option value="pc" >PC</option>
<option value="pf" >PF</option>
<option value="pt" >PT</option>
<option value="pr" >PR</option>
<option value="pm" >PM</option>
<option value="ogp" >OGP</option>
</select>

<select name="filter3">
<option value="mandatory">Mandatory</option>
<option value="nonmandatory">Nonmandatory</option>
<option value="combined">Combined</option>
</select>

</td></tr>
</form>
</table>
<br /><br />
<div id="ajaxResult">
RESULTS:
</div>
<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 &amp;
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>
<script>
$("#doublecombo").submit(function() {
var url = "find_policy.inc.php";
$.ajax({
type: "POST",
url: url,
data: $("#doublecombo").serialize(), // serializes the form's elements.
success: function(data)
{
$("#ajaxResult").html(data);
}
});
return false; // avoid reload.
});
</script>




And here is the db portion:



<?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'].'&nbsp;'.$row['status'].'&nbsp;'.$row['title'].'</a>'. '<br>'.

$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
$row['email'].'&nbsp;'.'&nbsp;'.$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'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.$row['email'].'&nbsp;'.'&nbsp;'.$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'].'&nbsp;'.$row['status'] .$row['title'].'</a>'. '<br>'.

$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
$row['email'].'&nbsp;'.'&nbsp;'.$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'].'&nbsp;'.$row['status'] .$row['title'].'</a>'. '<br>'.

$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
$row['email'].'&nbsp;'.'&nbsp;'.$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'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
$row['email'].'&nbsp;'.'&nbsp;'.$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'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
$row['email'].'&nbsp;'.'&nbsp;'.$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'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
$row['email'].'&nbsp;'.'&nbsp;'.$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>








 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved