<div class="container_automobili_full">
<h1>Trova auto usate</h1>

<div id="placeHolderMarca"> </div>

<div id="placeHolderModello"> </div>
<script id="selectMarca" type="text/x-handlebars-template">
		<div class="marginTopFontM quickSearchInputL floatLeft" id="makeLabel1">
			<label>Marca</label>
            
            
			<select class="inputFullWidth" id="make1" name="make">
	    			<option value="all">Tutto</option>
				    {{#each marche}}
				    	<option value="{{id}}">{{value}}</option>
	    			{{/each}}
			</select>
            </div>

	</script><script id="selectModelli" type="text/x-handlebars-template">
		<div class="marginLeftS marginTopFontM quickSearchInputL floatLeft" id="modelLabel1">
		<label class="label-disabled model">Modello</label>
	
            
		<select class="inputFullWidth" id="model1" name="model">
			<option value="all">Tutto</option>
			{{#each marche}}
				{{#ifCurrentMarca id}}
			    	{{#each modelli}}
			    		<option value="{{id}}">{{value}}</option>
					{{/each}}
				{{/ifCurrentMarca}}
			{{/each}}
		</select>

</div>

				<script type="text/javascript">
	        		$( "#model1" ).change(function() {
					val = $(this).val();
        			$(this).parent().find("span").html(val);
        			});
        		<{{!}}/script>

	</script><script type="text/javascript">
		var currentMarca = "";

		Handlebars.registerHelper('ifCurrentMarca', function(v1, options) {
		  if(v1 == currentMarca) {
		    return options.fn(this);
		  }
		  return options.inverse(this);
		});

		var selectMarca = $("#selectMarca").html(); 
		var templateMarca = Handlebars.compile(selectMarca); 

		var selectModelli = $("#selectModelli").html(); 
		var templateModelli = Handlebars.compile(selectModelli); 

		$.get("/motori/marca.json",function(data,status,xhr){
				//d = eval ( data );
        		$("#placeHolderMarca").append(templateMarca(data));
        		$("#placeHolderModello").append(templateModelli(data));
        		$( "#make1" ).change(function() {
        			currentMarca = $(this).val();
        			$("#placeHolderModello").html(templateModelli(data));
                    val = $(this).val();
        			$(this).parent().find("span").html(val);
				});
        });

		

	</script>

<div class="marginTopFontM quickSearchInputS floatLeft" id="blockPrice"><label>Prezzo (€)</label> <select class="inputFullWidth" id="priceto" name="priceto"><option selected="selected" value="0">fino a</option><option value="500">500</option><option value="1000">1.000</option><option value="1500">1.500</option><option value="2000">2.000</option><option value="2500">2.500</option><option value="3000">3.000</option><option value="4000">4.000</option><option value="5000">5.000</option><option value="6000">6.000</option><option value="7000">7.000</option><option value="8000">8.000</option><option value="9000">9.000</option><option value="10000">10.000</option><option value="12500">12.500</option><option value="15000">15.000</option><option value="17500">17.500</option><option value="20000">20.000</option><option value="25000">25.000</option><option value="30000">30.000</option><option value="40000">40.000</option><option value="50000">50.000</option><option value="75000">75.000</option><option value="100000">100.000</option> </select></div>

<div class="marginLeftS marginTopFontM quickSearchInputS floatLeft" id="blockFirstRegistration"><label>Anno di immatricolazione</label> <select class="inputFullWidth" id="yearfrom" name="yearfrom"><option selected="selected" value="0">dal</option><option value="2014-01">2014</option><option value="2013-01">2013</option><option value="2012-01">2012</option><option value="2011-01">2011</option><option value="2010-01">2010</option><option value="2009-01">2009</option><option value="2008-01">2008</option><option value="2007-01">2007</option><option value="2006-01">2006</option><option value="2005-01">2005</option><option value="2004-01">2004</option><option value="2003-01">2003</option><option value="2002-01">2002</option><option value="2001-01">2001</option><option value="2000-01">2000</option><option value="1999-01">1999</option><option value="1998-01">1998</option><option value="1997-01">1997</option><option value="1996-01">1996</option><option value="1995-01">1995</option><option value="1994-01">1994</option><option value="1993-01">1993</option><option value="1992-01">1992</option><option value="1991-01">1991</option><option value="1990-01">1990</option><option value="1989-01">1989</option><option value="1988-01">1988</option><option value="1987-01">1987</option><option value="1986-01">1986</option><option value="1985-01">1985</option><option value="1980-01">1980</option><option value="1975-01">1975</option><option value="1970-01">1970</option><option value="1965-01">1965</option><option value="1960-01">1960</option><option value="1955-01">1955</option><option value="1950-01">1950</option><option value="1940-01">1940</option><option value="1930-01">1930</option><option value="1920-01">1920</option><option value="1910-01">1910</option> </select></div>

<div class="marginLeftS marginTopFontM quickSearchInputS floatLeft" id="blockMileage"><label>Chilometraggio</label> <select class="inputFullWidth" id="mileageto" name="mileageto"><option selected="selected" value="0">fino a</option><option value="2500">2.500</option><option value="5000">5.000</option><option value="10000">10.000</option><option value="20000">20.000</option><option value="30000">30.000</option><option value="40000">40.000</option><option value="50000">50.000</option><option value="60000">60.000</option><option value="70000">70.000</option><option value="80000">80.000</option><option value="90000">90.000</option><option value="100000">100.000</option><option value="125000">125.000</option><option value="150000">150.000</option><option value="175000">175.000</option><option value="200000">200.000</option> </select></div>

<div class="marginLeftS marginTopFontM quickSearchInputS floatLeft" id="blockFuel"><label>Carburante</label> <select class="inputFullWidth" id="fuel" name="fuel"><option selected="selected" value="0">Tutto</option><option value="PETROL">Benzina</option><option value="DIESEL">Diesel</option><option value="LPG,CNG">Gas</option><option value="HYBRID,HYBRID_DIESEL">Ibrida</option><option value="ELECTRICITY">Elettrica</option> </select></div>


<div class="blockSearchButton" id="blockSearchButton"><input type="button" value="CERCA" /></div>
</div>


<div class="container_list_full"> </div>
<script id="resultsAd" type="text/x-handlebars-template">
	<h1>Risultato delle ricerche</h1>

	<div class="paddingHorizontalM floatRight">
		<div class="boxHeaderSort floatRight">
			<select class="floatRight" id="sortingParameters" name="sort">
				<option value="price">Prezzo crescente</option>
				<option value="-price">Prezzo decrescente</option>
				<option value="make">Marca/Modello crescente</option>
				<option value="-make">Marca/Modello decrescente</option>
				<option value="year">Anno crescente</option>
				<option value="-year">Anno decrescente</option>
				<option value="mileage">Chilometraggio crescente</option>
				<option value="-mileage">Chilometraggio decrescente</option>
				<option value="-age">Annunci più recenti</option>
				<option value="power">Potenza crescente</option>
				<option value="-power">Potenza decrescente</option>
			</select>
		</div>
		<span class="floatRight boxHeaderTitle">Ordina per</span>
	</div>

	{{#each ads}}
		<div class="listItem">
			<div class="listImage">
				<a class="" target="_blank" href="{{urlDetail}}"><img width="115px" class="imgBig" alt="" src="{{imageUrl}}"></a>
             </div>
             <div class="listItem_list">
             	<span class="">€ {{price}}</span>
                <span class="">{{mileage}} km</span>
                 <span class="">{{year}}</span>
                 <span class="">{{power}} KW</span>
                 <span class="">{{cvPower}} CV</span>
             </div>
             <div class="listItem_list">
	             <a class="" target="_blank" href="{{urlDetail}}"><span class="modello">{{make}} {{model}} - {{modelDescription}}</span></a>
             </div>
             <div class="listItemHeader">
	             <span class="nclk">{{countryCode}} - {{zipCode}} {{cityCode}}  </span> - <span class="trunc_nclk">Usato {{fuel}}, {{warranty}}</span>
           </div>
      </div>
    {{/each}}
			
	{{paginationLoop currentPage totalPage}}
</script><script type="text/javascript">
	var form_full = ".container_automobili_full";
	var list_full = ".container_list_full";
	var resultsAd = $("#resultsAd").html(); 
	var templateAd = Handlebars.compile(resultsAd); 
	var currentPage = 1;
	var selectedSort = "price";

	function submitForm() {
		var querystring = "";
		var fields = $(form_full + " :input").serializeArray();
		$.each(fields, function(i, field) {
			if(field.name != "undefined" && field.value != "0" && field.value != "" && field.value != "all"){
				querystring += "&"+field.name+"="+field.value;
			}
		});
		
		fields = $(list_full + " :input").serializeArray();
		$.each(fields, function(i, field) {
			if(field.name != "undefined" && field.value != "0" && field.value != "" && field.value != "all"){
				querystring += "&"+field.name+"="+field.value;
				selectedSort = field.value;
			}
		});

		querystring+="&currentPage="+currentPage;

		$(".container_list_full").html('<div style="text-align:center"><img src="/res/img/loading.gif" /></div>');

		$.get( "/servizi/cerca-auto-usate/?act=search" + querystring, function(data) {
			$(".container_list_full").html(templateAd(data));
			$(list_full + " :input").val(selectedSort);

			$("#archivio_pagination li a").click(function() {
				currentPage = $(this).attr("data-value");
				submitForm();
			});
			$( "#sortingParameters" ).change(function() {
				submitForm();
			});
		 }).done(function() {
	    	//alert( "second success" );
	  	}).fail(function(qXHR, textStatus, errorThrown) {
	    	//console.log( "error ",qXHR );
	  	})
	  	.always(function() {
	    	//alert( "finished" );
		});
	 
	}



	$(form_full + " .blockSearchButton :input").click(function(){currentPage = 1; submitForm();});
	$(form_full).keypress(function(e) {
		var code = e.keyCode || e.which;
		if(code == 13) {
			currentPage = 1;
			submitForm();
		}
	});



	Handlebars.registerHelper('paginationLoop', function(currentPage,totalPage) {
		gap = 7;
    	htmlLi = '';
    	startNumber = parseInt(currentPage) - gap;
    	endNumber = parseInt(currentPage) + gap;
    	if(totalPage > 1)
    		htmlLi +='<div class="paging"><ul id="archivio_pagination" class="list_Pagination">';
    	if(startNumber > 0)
    		htmlLi += '<li class="dotted">...</li>';
	    for (i = 1; i <= totalPage; i++) {
	    	if(currentPage == i)
	    		htmlLi += '<li class="selected">'+i+'</li>';
	    	else if( i >= startNumber && i <= endNumber)htmlLi += '<li ><a href="#blockSearchButton" data-value="'+i+'">'+i+'</a></li>';
	    };
    	if(endNumber < totalPage)
    		htmlLi += '<li class="dotted">...</li>';
    	if(totalPage > 1)
    		htmlLi += '</ul></div>';
    	return new Handlebars.SafeString(htmlLi);
	});
	

    $( "select" ).change(function() {
       val = $(this).val();
       $(this).parent().find("span").html(val);
	});

</script>

Naviga le sezioni

Segui le Dirette

I nostri social

Continua ad esplorare

Auto Usate

Trova auto usate