im working on a website for a customer and I need to make a search form. The website is a Car Dealership, you can check it here http://barradinhas.pt/amazingtrust/cars.php
Right now i have the cars being pulled from a XML file by a php function
<?php $xml = new simplexmlelement('https://feeds.standvirtual.com/feeds-carspt/feed_user_business_07ebc8b425ca43abaaf33b2b7d17affb.xml', 0, true); foreach($xml->Vehicle as $car){ echo' <div class="col-md-6" id="display" data-id="'. $car->ID .'" data-pricerange="'. $price_range .'" data-kmsrange="'. $kms_range .'" data-tipo="'. $car->Category .'" data-marca="'. $car->Brand .'" data-combustivel="'. $car->Fuel .'" data-mudancas="'. $car->GearBox .'" data-portas="'. $car->Doors .'" data-lugares="'. $car->Seats .'"> <div class="product-item"> <a href="car-details.php?id='. $car->ID .'"><img src="'. $car->PhotoList->Photo .'" alt=""></a> <div class="down-content"> <a href="car-details.php?Id='. $car->ID .'"><h4>'. $car->Brand .' '. $car->Model .'</h4></a> <h6>'. $car->Price .'€</h6> <p>'. $car->HP .' hp / '. $car->Year .' / '. $car->Fuel .'</p> <small> <strong title="Author"><i class="fa fa-dashboard"></i> '. $car->Kms .'km</strong> <strong title="Author"><i class="fa fa-cube"></i> '. $car->CC .'cc</strong> <strong title="Views"><i class="fa fa-cog"></i> '. $car->GearBox .'</strong> </small> </div> </div> </div> '; }?>
So, i wanted to do an Ajax call or something like that so that the page wouldn’t refresh.
I’ve commed up with the following
<script> $("#submit12").click(function (e) { if($('#display[data-tipo='+ $('#tipo').val() +']') || $('#tipo').val() == "todos" && $('#display[data-marca='+ $('#marca').val() +']') || $('#marca').val() == "todos"){ $('#display').show(); $('#display:not([data-tipo='+ $('#tipo').val() +'])').hide(); $('#display:not[data-marca='+ $('#marca').val() +'])').hide(); } }); </script>
This is not working right now and I know this isn’t the way to go…
Any ideas on how I can make this search form work?
Thanks guys
Quick translation
Todos : All // Marca : Brand // Tipo : Type //
Advertisement
Answer
To achieve above one way would be storing value of selects in array as key-value pair because there multiple such select-boxes at your website .
In below code i have first loop through all selects which are there under your form
then i have use 2 array one to store key-value
i.e : if id ="marca"
and value="Audi"
so key will be marca
and value will be Audi
and the other to store only keys i.e : marca ,tipo..etc
.
Now , once we get all value from the selects we need to loop through car divs to match the value from array to data attr of particular .Here ,in every div i have added one extra class i.e :cars
just to loop through it .Then i have check if the value in array matches with the data-attr value if yes we can some variable to store count and depending on this we will show or hide that divs .
Demo Code :
$("#submit12").click(function(e) { var arrSelected = []; var arrTypes = []; //loop through all selects $("form > select").each(function() { //check if id is not undefined if (arrSelected[$(this).attr('id')] == undefined) { arrSelected[$(this).attr('id')] = []; } //add value in key value pair arrSelected[$(this).attr('id')].push($(this).val()); if ($.inArray($(this).attr('id'), arrTypes) < 0) { arrTypes.push($(this).attr('id')); //add ids to another array } }) $(".cars").hide(); //hide all cars //loop through cars $('.cars').each(function() { var intKeyCount = 0; //get ids of selcts for (key in arrTypes) { var blnFound = false; //get value at that ids for (val in arrSelected[arrTypes[key]]) { //check if the data attr matchs or if the value if "All" if (($(this).attr('data-' + arrTypes[key]).indexOf(arrSelected[arrTypes[key]][val]) > -1) || (arrSelected[arrTypes[key]][val] == "todos")) { blnFound = true; //we found break; } } if (blnFound) { intKeyCount++; //increment value } } //check if it matches atleast one -filter or if you need to match all condition then use both if ((intKeyCount > 0) /*&& (intKeyCount == arrTypes.length)*/ ) { $(this).show(); //show } else { $(this).hide(); //hide } }) });
img { width: 55px; height: 55px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="#" id="search"> <label>Tipo:</label> <select class="form-control" id="tipo"> <option value="todos">Todos</option> <option value="Utilitário">Utilitário</option> <option value="Carrinha">Carrinha</option> <option value="Pequeno citadino">Pequeno citadino</option> </select> <label>Marca:</label> <select class="form-control" id="marca"> <option value="todos">Todos</option> <option value="VW">VW</option> <option value="Audi">Audi</option> <option value="Renault">Renault</option> <option value="Peugeot">Peugeot</option> <option value="Hyundai">Hyundai</option> <option value="Fiat">Fiat</option> <option value="MINI">MINI</option> </select> <button type="button" id="submit12" class="filled-button btn-block">Procurar</button> </form> <div class="row allcars"> <!--add cars class to every car div--> <div class="col-md-6 cars" id="display" data-id="8081076453" data-pricerange="4" data-kmsrange="4" data-tipo="Utilitário" data-marca="VW" data-combustivel="hibride-gaz" data-mudancas="automatic" data-portas="5" data-lugares="5"> <div class="product-item"> <a href="car-details.php?id=8081076453"><img src="https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6Im53bHRod2xzcHo5aC1TVERWVExQVCJ9.FMV9cOBhT6T-ZNFm1e1i7QP-cJ1y3rK24zk-UFDmkh8/image;s=1280x800" alt=""></a> <div class="down-content"> <a href="car-details.php?Id=8081076453"> <h4> <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">VW Golf</font> </font> </h4> </a> <h6> <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">€ 16950</font> </font> </h6> </div> </div> </div> <div class="col-md-6 cars" id="display" data-id="8081053611" data-pricerange="4" data-kmsrange="5" data-tipo="Carrinha" data-marca="Audi" data-combustivel="diesel" data-mudancas="manual" data-portas="5" data-lugares="5"> <div class="product-item"> <a href="car-details.php?id=8081053611"><img src="https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6Im5tZHR0a3VzYWpibjMtU1REVlRMUFQifQ.SHXYfvmcOcD5NoWDSZ-792r34GitnKChdRI4pyn9PGM/image;s=1280x800" alt=""></a> <div class="down-content"> <a href="car-details.php?Id=8081053611"> <h4> <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">Audi A6 Avant</font> </font> </h4> </a> <h6> <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">€ 17950</font> </font> </h6> </div> </div> </div> <div class="col-md-6 cars" id="display" data-id="8080975818" data-pricerange="3" data-kmsrange="2" data-tipo="Utilitário" data-marca="Hyundai" data-combustivel="diesel" data-mudancas="manual" data-portas="5" data-lugares="5"> <div class="product-item"> <a href="car-details.php?id=8080975818"><img src="https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6Im1mMjNvZGo4aThoZjMtU1REVlRMUFQifQ.x3XO2iCDJ3Ahofss1sT7MKhdK80D8yNIuYOLWVf--yc/image;s=1280x800" alt=""></a> <div class="down-content"> <a href="car-details.php?Id=8080975818"> <h4> <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">Hyundai i30</font> </font> </h4> </a> <h6> <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">€ 13950</font> </font> </h6> </div> </div> </div> <div class="col-md-6 cars" id="display" data-id="8080943181" data-pricerange="2" data-kmsrange="4" data-tipo="Pequeno citadino" data-marca="Fiat" data-combustivel="gaz" data-mudancas="manual" data-portas="3" data-lugares="4"> <div class="product-item"> <a href="car-details.php?id=8080943181"><img src="https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjY4aXYwZGxvcmtxdDItU1REVlRMUFQifQ.yn7-j3Ml76wzIMmgt8VMNo9613vFOEyilbqncUaXT-I/image;s=1280x800" alt=""></a> <div class="down-content"> <a href="car-details.php?Id=8080943181"> <h4> <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">Fiat 500</font> </font> </h4> </a> <h6> <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">€ 5950</font> </font> </h6> </div> </div> </div> </div>