Search in PHP and XML

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 &nbsp;/&nbsp; '. $car->Year .' &nbsp;/&nbsp; '. $car->Fuel .'</p>
                    <small>
                        <strong title="Author"><i class="fa fa-dashboard"></i> '. $car->Kms .'km</strong> &nbsp;&nbsp;&nbsp;&nbsp;
                        <strong title="Author"><i class="fa fa-cube"></i> '. $car->CC .'cc</strong>&nbsp;&nbsp;&nbsp;&nbsp;
                        <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 //

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>