I have 4 dropdowns that are used as search filters as shown on the picture:
When the page is first loaded no filter is applied and the result is shown like this:
So what i wanna achieve is that when the user select let's say a typology ex: apartament, the result is refreshed and automaticly shown , if the user select a location , it shows all data that are typolgy=appartament and location='xyz' and so one for the 4 filters.
These are the filters
<select name='typology_categories' id="categories" onchange="filter(this.value)">
<option value=''>All</option>
<option value='1'> house</option>
<option value='2'> appartament</option>
<option value='3'> trade center</option>
<option value='3'> villa</option>
</select>
<select name='location' id="location">
<option value=''>All</option>
<option value='1'> Italy</option>
<option value='2'> Germany</option>
<option value='3'> England</option>
<option value='3'> USA</option>
</select>
<select name='price' id="price">
<option value="">All</option>
<option value="1000">0 - 1,000</option>
<option value="5000">1,000 - 5,000</option>
<option value="50000">5,000 - 50,000</option>
<option value="100000">50,000 - 100,000</option>
<option value="500000">100,000 - 500,000</option>
<option value="1000000">500,000 - 1,000,000</option>
<option value="1000001">more then 1,000,000</option>
</select>
<select name='condition' id="condition" >
<option value=''>All</option>
<option value='1'> new</option>
<option value='2'> used</option>
<option value='3'> reconstructed</option>
</select>
Here is the code that is executed when the page is loaded when no filter is applied yet:
<!-- HERE IS THE SEARCH DYNAMIC LIST on load of the page-->
<?php
$typologies_sql = "SELECT * FROM typologies";
$typologies = mysql_query($typologies_sql) or die (mysql_error());
$numrowsTypologies = mysql_num_rows($typologies);
if($numrowsTypologies == 0){
$result = "<ul id=\"thumbs\">";
$result .= "No Data Found in Database";
$result .= "<ul id=\"thumbs\">";
} else {
$result = "<ul id=\"thumbs\">";
while($rowTypologies= mysql_fetch_assoc($typologies)){
$id = $rowTypologies['id'];
$item_id = $rowTypologies['item_id'];
$title = htmlentities($rowTypologies['title'], ENT_COMPAT, "UTF-8");
$description = htmlentities($rowTypologies['description'], ENT_COMPAT, "UTF-8");
$thumbnail = htmlentities($rowTypologies['thumbnail'], ENT_COMPAT, "UTF-8");
$price = htmlentities($rowTypologies['price'], ENT_COMPAT, "UTF-8");
$typology_category_id = htmlentities($rowTypologies['typology_category_id'], ENT_COMPAT, "UTF-8");
$typology_condition_id = htmlentities($rowTypologies['typology_condition_id'], ENT_COMPAT, "UTF-8");
$first = base64_encode($item_id);
$typologyThumbnails = "admin/app/webroot/img/uploads/typology/thumbnails/" . $thumbnail;
$result .= "<li class=\"item-thumbs span4 \">"; /* video - is the izotope data which should be passed dynamicly.*/
$result .= "<a class=\"hover-wrap fancybox-media\" data-fancybox-group=\"video\" title=\"{$description}\" href=\"new.php?id=$first\">";
$result .= "<span class=\"overlay-img\"></span>";
$result .= "<span class=\"overlay-img-thumb font-icon-search\"></span>";
$result .= "</a>";
$result .= "<img src=\"$typologyThumbnails\" alt=\"{$description}\">";
$result .= "</li>";
}
$result .= "<ul id=\"thumbs\">";
}
?>
here is after the first filter is applied:
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" >
function filter(typology_category_id){
$.ajax({
type: "POST",
url: "search.php",
data: { id: typology_category_id},
success:function(data){
$("#projects").html(data);
}
});
}
</script>
And the search.php file is this:
<?php
require_once('functions/functions.php');
require_once('functions/connection.php');
?>
<?php
if (isset($_POST['id'])) {
$id_update = trim(mysql_prep($_POST['id']));
/* Query for the typology*/
$queryTypologies = "SELECT * ";
$queryTypologies .= "FROM typologies";
if (isset($id_update) && !empty($id_update) && $id_update!='') {
$queryTypologies .= " WHERE typology_category_id = (SELECT id FROM typology_categories WHERE id ='".$id_update."' LIMIT 1)";
}
$typologies = mysql_query($queryTypologies) or die (mysql_error());
$result = "<ul id=\"thumbs\">";
while($rowTypologies= mysql_fetch_assoc($typologies)){
$id = $rowTypologies['id'];
$item_id = $rowTypologies['item_id'];
$title = htmlentities($rowTypologies['title'], ENT_COMPAT, "UTF-8");
$description = htmlentities($rowTypologies['description'], ENT_COMPAT, "UTF-8");
$thumbnail = htmlentities($rowTypologies['thumbnail'], ENT_COMPAT, "UTF-8");
$price = htmlentities($rowTypologies['price'], ENT_COMPAT, "UTF-8");
$typology_category_id = htmlentities($rowTypologies['typology_category_id'], ENT_COMPAT, "UTF-8");
$typology_condition_id = htmlentities($rowTypologies['typology_condition_id'], ENT_COMPAT, "UTF-8");
$first = base64_encode($item_id);
$result .= "<li class=\"item-thumbs span4 \">";
$result .= "<a class=\"hover-wrap fancybox-media\" data-fancybox-group=\"video\" title=\"{$description}\" href=\"new.php?id=$first\">";
$result .= "<span class=\"overlay-img\"></span>";
$result .= "<span class=\"overlay-img-thumb font-icon-search\"></span>";
$result .= "</a>";
$result .= "<img src=\"$thumbnail\" alt=\"{$description}\">";
$result .= "</li>";
}
$result .= "</ul>";
echo $result;
}
mysql_close();
?>
So what i wanna achieve is that on change of the drop down select filters, the result search is changed dynamicly.
Any help would be very appruciated. Thanx in advance.
