[RESOLVED] Add a "filter" to my page

**chrisboots** · 05-08-2012 10:24 AM

Hi.

I run my works website. We are a car hire company.

On our main "index" page is a "list" of all our cars( http://www.pennycarhire.co.uk)

What i want to add is a "filter", what i mean by this is have, say a drop down box, with different criteria in it, e.g Diesel only, auto only e.c.t. So when you first load the page you see all cars, but when you chose a filter, say auto only, it would only show Automatic cars.

So my question is, where the hell do i start ? . can this even be done with javascript? I just need a point in the right direction

thanks

**Padonak** · 05-08-2012 11:20 AM

if i were you i would mark every block which describes a car so to make filtering easier. for example, it may be a div having the proper class:

Code:

<div class="fiat robomech petrol">
<!-- <a id="" href="panda.html" title="Panda 1.2" accesskey="1"></a> -->
<p><img align="right" alt="Panda 1.2" id="image47" title="Clio 1.2" src="images/panda.jpg" width="150" height="115"></img></p>
<div class="c2"><big><a href="Panda.html"><strong>Fiat Panda 1.2 5Dr:</strong></a></big><br></br>
&pound;25.00 per Day<p>
&pound;130.00 per week</p>
</div>
</div>

then using JQuery (as for me, i haven't used any other) you could hide/show/fade/etc. these divs according to which class it has. these actions are not that difficult to code up.

Code:

// this hides every div which has class fiat among all it's classes
$('div[class*=fiat]').css('display','none');

// *= means has among smth else

// this hides every div which has class petrol among all it's classes
$('div[class*=petrol]').css('display','none');

etc.

my english is not good, but i hope this makes sense

**chrisboots** · 05-08-2012 01:00 PM

Originally Posted by Padonak

if i were you i would mark every block which describes a car so to make filtering easier. for example, it may be a div having the proper class:

my english is not good, but i hope this makes sense

Sounds good, ill take a look at doing that. Thank you very much

**Padonak** · 05-08-2012 01:08 PM

anytime )

**xelawho** · 05-08-2012 01:42 PM

another possibility would be making your cars into objects and having them filterable by their properties. here's a script I worked on for another, similar post - the objects aren't constructed the way I would (I'd do it like this for readability's sake):

Code:

cars=[{name: "Lamborghini Aventador",mpgrange: 1,passenger: 2,luggage:0,fuel: "Petrol", gearbox: "Manual", aircon: "Yes", daycost: 2000, weekendcost: 38000, weeklycost: 12000, thumbnail: "Images/aventador.jpg"},
{name:"Peugeot 107",
//etc
}]

and there's some other stuff going on that you might not want, but it may give you some ideas...

Code:

<body >
<div id="form_container">
<h1><a>Car Hires</a></h1>
<form name="hireform" class="appnitro"  method="post" action="">
<div class="form_description">
<h2>Car Hires</h2>
<p>Fill the form below, and we will provide you with a list of cars that match your requirements.</p>
</div>						
			<ul >
<li id="li_1" >
<label class="description" for="element_1">Name </label>
<span>
<input id="element_1_1" name= "fname" class="element text" maxlength="255" size="8" value=""/>
			<label>First</label>
		</span>
		<span>
			<input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="14" value=""/>
			<label>Last</label>
		</span> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Email </label>
		<div>
			<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li class="section_break">
			<h3>Section Break</h3>
			<p></p>
		</li>		<li id="li_4" >
		<label class="description" for="element_4">No. of Passengers </label>
		<div>
			<input id="element_4" name="passengers" class="element text small" type="text" maxlength="255" value=""/> 
		</div><p class="guidelines" id="guide_4"><small>Enter the number of passengers in numerical format</small></p> 
		</li>		<li id="li_5" >
		<label class="description" for="element_5">Items of Luggage </label>
		<span>
			<input id="element_5_0" name="luggage" class="element radio" type="radio" value="0" />
<label class="choice" for="element_5_0">0</label>
			<input id="element_5_1" name="luggage" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">1</label>
<input id="element_5_2" name="luggage" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">2</label>
<input id="element_5_3" name="luggage" class="element radio" type="radio" value="3" />
<label class="choice" for="element_5_3">3</label>
<input id="element_5_4" name="luggage" class="element radio" type="radio" value="4" />
<label class="choice" for="element_5_4">4</label>

		</span> 
		</li>		<li id="li_6" >
		<label class="description" for="element_6">Fuel Type </label>
		<span>
			<input id="element_6_1" name="fuel" class="element radio" type="radio" value="Diesel" />
<label class="choice" for="element_6_1">Diesel</label>
<input id="element_6_2" name="fuel" class="element radio" type="radio" value="Petrol" />
<label class="choice" for="element_6_2">Petrol</label>

		</span> 
		</li>		<li id="li_7" >
		<label class="description" for="element_7">Transmission/Gear Box </label>
		<span>
			<input id="element_7_1" name="gearbox" class="element radio" type="radio" value="Automatic" />
<label class="choice" for="element_7_1">Automatic</label>
<input id="element_7_2" name="gearbox" class="element radio" type="radio" value="Manual" />
<label class="choice" for="element_7_2">Manual</label>
<input id="element_7_3" name="gearbox" class="element radio" type="radio" value="Semi-Automatic" />
<label class="choice" for="element_7_3">Semi-Automatic</label>

		</span> 
		</li>		<li id="li_8" >
		<label class="description" for="element_8">Airconditioning </label>
		<span>
			<input id="element_8_1" name="aircon" class="element radio" type="radio" value="Yes" />
<label class="choice" for="element_8_1">Yes</label>
<input id="element_8_2" name="aircon" class="element radio" type="radio" value="No" />
<label class="choice" for="element_8_2">No</label>

		</span> 
		</li>		
		
<li id="li_9" >
		<label class="description" for="element_5">Miles Per Gallon</label>
		<span>
			<input id="element_5_1" name="MPG" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">10-35 MPG</label>
<input id="element_5_2" name="MPG" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">35-45 MPG</label>
<input id="element_5_3" name="MPG" class="element radio" type="radio" value="3" />
<label class="choice" for="element_5_3">Above 45 MPG</label>
		</span> 
		</li> 	<li id="li_10" >
		<label class="description" for="element_9">Duration of Rental </label>
		<div>
		<select class="element select medium" id="element_9" name="element_9"> 
			<option value="daycost" selected="selected">Day</option>
<option value="weekendcost" >Weekend</option>
<option value="weeklycost" >Full Week</option>


		</select>
		</div> 
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="365314" />
			    
				<input id="saveForm" class="button_text" type="button" name="submit" value="Submit" onclick="submitform()"/>
		</li>
			</ul>
		<div id="matchdiv">
		</div>
			</form>

		<div id="footer">
			Reference - <a href="http://www.phpform.org">pForm</a>
		</div>
	</div>
	<img id="bottom" src="bottom.png" alt="">
	</body>
	<script>
	//array information */
var car=["Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta"];
var mpgrange=[1, 3, 3, 3, 1, 3, 2, 1, 3, 3];
var passenger=[2, 4, 5, 5, 7, 4, 5, 5, 2, 5];
var luggage=[0, 1, 2, 2, 4, 1, 3, 2, 1, 2];
var fuel=["Petrol", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Petrol", "Petrol"];
var gearbox=["Semi-Automatic", "Manual", "Manual", "Manual", "Manual", "Manual", "Automatic", "Automatic", "Manual", "Automatic"];
var aircon=["Yes", "No", "Yes", "Yes", "Yes", "No", "Yes", "Yes", "No", "Yes"];
var daycost=[2000, 30, 34, 44, 40, 25, 45, 87, 10, 31];
var weekendcost=[3800, 90, 97, 110, 99, 25, 115, 243, 25, 90];
var weeklycost=[12000, 135, 167, 183, 162, 124, 173, 560, 65, 130];
var thumbnail=["Images/aventador.jpg", "Images/peugeot.jpg", "Images/golf.jpg", "Images/prius.jpg", "Images/kia.jpg", "Images/citroen.jpg", "Images/vauxhall", "Images/merc.jpg", "Images/robin.jpg", "Images/ford.jpg"];


var cars = [];
for(var i=0;i<car.length;i++)
{
cars[i] = {
name: car[i],
mpgrange: mpgrange[i],
passenger: passenger[i],
luggage: luggage[i],
fuel: fuel[i],
gearbox: gearbox[i],
aircon: aircon[i],
daycost: daycost[i],
weekendcost: weekendcost[i],
weeklycost: weeklycost[i],
display:true,
thumbnail: thumbnail[i]
}
}

function submitform(){
var space="";
var fueltype="";
var gbox="";
var airconditioning="";
var economy="";
var hireprice = document.hireform.element_9.value;
var passno = document.hireform.passengers.value;
thediv=document.getElementById("matchdiv")

while (thediv.firstChild) {
  thediv.removeChild(thediv.firstChild);
}
var passno = document.hireform.passengers.value;
var radios = document.getElementsByTagName('input');
for (var a = 0; a < radios.length; a++) {
    if (radios[a].name == 'luggage' && radios[a].checked) {
		space = radios[a].value;
	}
	if (radios[a].name=='fuel' && radios[a].checked) {
		fueltype = radios[a].value;
	}
	if (radios[a].name=='gearbox' && radios[a].checked) {
		gbox = radios[a].value;
	}
	if (radios[a].name=='aircon' && radios[a].checked) {
		airconditioning = radios[a].value;
	}
	if (radios[a].name=='MPG' && radios[a].checked) {
		economy = radios[a].value;
	}
}


var radioCount=0;
var prices=[];
for(var x=0;x<car.length;x++){
if ((cars[x].passenger>=passno||passno=="")&&(cars[x].luggage>=space||space=="")&&(cars[x].fuel==fueltype||fueltype=="")&&(cars[x].gearbox==gbox||gbox=="")&&(cars[x].aircon==airconditioning||airconditioning=="")&&(cars[x].mpgrange>=economy||economy=="")) {
prices.push(cars[x][hireprice])
var newRadio = document.createElement("input");
var br = document.createElement("br");
newRadio.type = "radio";
newRadio.id = "myRadio"+radioCount;
newRadio.name = "myRadio";
newRadio.value = cars[x].name;
var newLabel = document.createElement("label");
newLabel.htmlFor = cars[x].name;
newLabel.appendChild(document.createTextNode(cars[x].name+" "+cars[x][hireprice]));
var newImage = document.createElement("IMG");
newImage.setAttribute("src",cars[x].thumbnail);
thediv.appendChild(newRadio);
thediv.appendChild(newLabel);
thediv.appendChild(br);
thediv.appendChild(newImage);
radioCount++
	}
}

	
if (radioCount>1){
var mess=document.createTextNode("The following cars meets your requirements:");
thediv.insertBefore(mess,document.getElementById("myRadio0"));
thediv.insertBefore(br,document.getElementById("myRadio0"));		
for(var a=0;a<prices.length;a++){
if (prices[a]===Math.min.apply(Math,prices)){
nextElement(document.getElementById("myRadio"+a)).style.backgroundColor="red";
nextElement(document.getElementById("myRadio"+a)).innerHTML+=" (the cheapest)";
document.getElementById("myRadio"+a).checked=true;
		}
	}
} else if (radioCount==0){
thediv.appendChild(document.createTextNode("sorry, we have nothing meeting your requirements"));	
	} else if (radioCount==1){
var mess=document.createTextNode("The following car meets your requirements:");
thediv.insertBefore(mess,document.getElementById("myRadio0"));
thediv.insertBefore(br,document.getElementById("myRadio0"));	
document.getElementById("myRadio0").checked=true;
}



}

function nextElement(el) {
    while((el = el.nextSibling) && el.nodeType!== 1);
    return el;
	}
	</script>
</body>
</html>

**chrisboots** · 05-09-2012 08:11 AM

Originally Posted by Padonak

anytime )

just tested what you said, my FIRST every time using jquery, and it works, perfectly,. Thank you so much !

**Padonak** · 05-09-2012 09:04 AM

xelawho's code is based on much deeper understanding of JavaScript than just using a thirdparty frameworks like JQ or smth like. i do highly recommend you to try xelawho's code even if you are going to use mine

Thread: [RESOLVED] Add a "filter" to my page

Thread Tools

Display

[RESOLVED] Add a "filter" to my page

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions