Using AJAX to filter PHP PDO results

[Nickmadd]

Hey guys I am having a bit of a hard time understanding how I can fetch data from my SQL table using AJAX and jQuery, I am sorry if this isn't the right place to post this however I usually get great support here.

 

I am trying to recreate this filter on the right of the page: http://www.autotrader.co.uk/search/used/cars/

 

So basically I have this code to display the whole MySQL table into a list:

<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
	  {
      echo '
	    <div class="listing-container">
	      <h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3>
	      <h3 class="price-listing">£'.number_format($row['Price']).'</h3>
	    </div>
	    <div class="listing-container-spec">
		 <img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
		  <div class="ul-listing-container">
		    <ul class="overwrite-btstrp-ul">
		      <li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
		      <li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
		      <li class="gear-svg list-svg">'.$row["Transmission"].'</li>
		      <li class="color-svg list-svg">'.$row["Colour"].'</li>
		    </ul>
		  </div>
		  <ul class="overwrite-btstrp-ul other-specs-ul h4-style">
		    <li>Mileage: '.number_format($row["Mileage"]).'</li>
		    <li>Engine size: '.$row["EngineSize"].'cc</li>
		  </ul>
		  <button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked 
		  </button>
		  <button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details 
		  </button>
		  <button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive 
		  </button>
		  <h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
	    </div>
	      ';
      } ?>

As you can see I am using a while loop to display the whole contents of the table into lists, this includes vehicle data.

 

I also have this bit of HTML that I will be using as a form to filter the results:

<form class="car-finder-container dflt-container">
	     <h2 class="h2-finder">Car finder</h2>
		 <ul class="toggle-view">
		   <li class="li-toggle">
		    <h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
		    <div class="panel">
			 <select class="form-control select-box">
				 <option value="make-any">Make (Any)</option>
				 <option value="two">Two</option>
				 <option value="three">Three</option>
				 <option value="four">Four</option>
				 <option value="five">Five</option>
	         </select>
			 <select class="form-control last-select select-box">
				 <option value="model-any">Model (Any)</option>
				 <option value="two">Two</option>
				 <option value="three">Three</option>
				 <option value="four">Four</option>
				 <option value="five">Five</option>
	         </select>
		    </div>
		   </li>
		   <li class="li-toggle">
		    <h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
		    <div class="panel">
			 <input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>
			 <label for="four-by-four-checkbox" class="label-checkbox">4x4</label>
			 <input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>
			 <label for="convertible-checkbox" class="label-checkbox">Convertible</label>
			 <input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>
			 <label for="coupe-checkbox" class="label-checkbox">Coupe</label>
		    </div>
		  </li>
		  <li class="li-toggle">
		    <h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
		    <div class="panel">
			 <input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
			 <label for="automatic-checkbox" class="label-checkbox">Automatic</label>
			 <input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
			 <label for="manual-checkbox" class="label-checkbox">Manual</label>
			 <input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
			 <label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
		    </div>
		  </li>
		</ul>
		 <button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars 
		 </button>
		 <h4 class="h4-finder"><a href="#">Try our Smart Search </a><span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
	   </form>

I have noticed that JS and Ajax give a great user experience when it comes to filtering search results, in this HTML template I have added some select elements and check boxes and I am now really stuck.

 

Does anybody know how I can make exceptions to what SQL results are returned to the front end or know of any tutorials?

 

Thanks

 

 

[Csharp]

I know this isn't the reply you were looking for. But considering the little experience you have with Javascript and PHP it's almost impossible to guide you alright.

 

If you're usign jQuery, the most simple way would be to replace the html with the AJAX response. You can read more here:

• http://api.jquery.com/jquery.ajax/
• http://api.jquery.com/html/

Hope it helps you, at least a little.