Ajax Search help wth multiple chained dropdowns

PHP
1

Hi

I am trying to create an ajax search which will allow users to filter a list of items.
I’ve seen a search that I like at the following link, its the advanced search part:

Used Cars For Sale | Browse Used Cars - Arnold Clark

What is the best way to go about setting this up?
I have all my data in a MySQL database and I’m using php. Can anyone tell me how to get the dropdowns to link and at the same time get the results counter to update based on the selections the user makes?

Any help much appreciated here.

Thanks in advance.

2

Each dropdown is just a refinement of the WHERE clause.

3

I’m trying to create a similar search to the link above. I’m not sure how to set up the ajax part so that the page doesn’t reload every time a user changes one of the dropdown menu’s I have. I just want the number of found results to update and then when a user clicks the view button the corresponding results will replace the ones currently being shown on the page. Can you give me a help with this please?

I can get it working when I only have 1 dropdown list but when there is more than 1 I’m getting confused. The code I’m using for one dropdown is below:

searchpage javascript:

<script type="text/javascript">
function showCars(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcars.php?q="+str,true);
xmlhttp.send();
}
</script>

searchpage form:

<form action="" method="post" enctype="multipart/form-data" name="MyForm"><span class="chooser-header">Choose a Manufacturer:</span>
      <select name="Make" onchange="showCars(this.value)">
                <option value="all">--- All Manufacturers ---</option>
<option value="BMW">BMW</option>
<option value="MINI">MINI</option>
                </select><div class="total-counter"><?php echo $total_results;?> in stock</div></form>
<div id="txtHint"></div>

getcars.php:


$q=$_GET["q"];

$sql="SELECT * FROM MyTable WHERE Make = '".$q."' ORDER BY Advanced ASC";

$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
  {
  echo "<li><div class='block'>".$row[Title]."</div></li>";
  }
mysql_close($link);

I’d really appreciate the help with this, I have a much more complex form that just 2 dropdown boxes but if someone could help me with the code I have to make it work for more than 1 item it would be great.

Any help much appreciated.

4

Something like…


$q = array();
foreach($_GET as $key => $value) {
  if(is_numeric($value)) {
       $q[] = $key.' = '.$value;
  } else {
       $q[] = $key.' = "'.$value.'"';
  }
}
$q = implode(' AND ',$q);
$sql = "SELECT * FROM MyTable WHERE ".$q." ORDER BY Advanced ASC";

Then you need to alter your javascript to construct the URL string correctly (which… i’m gonna pass you off to the JS forum for, unless you have further questions)

5

Waw! Thanks for the super quick reply on this! I’m obviously being a bit thick with this, I don’t understand where I need to put the code you’ve gave me here? I’m guessin that goes in my getcars.php file right? And then from my main searchform page I would put all the selected dropdown values into an array which would be my $q value?

Sorry I’m really stressing about this :s

6

that would go where you have $q=$_GET[“q”];

So, lets take a look at your code real quick to put it together:
Javascript:


showCars(this.value)

This calls the function passing in the value of your dropdown.


function showCars(str)
....
xmlhttp.open("GET","getcars.php?q="+str,true);

So now we have called that string ‘str’, and when we call the open function, we pass it “getcars.php?q=<thevalueofyourdropdown>” (after replacement)

That opens the PHP.


$q=$_GET["q"];

So; now that we know how things get to where they go, we expand.
Instead of the $q = $_GET[‘q’] line, we put in this


$q = array();
foreach($_GET as $key => $value) {
  if(is_numeric($value)) {
       $q[] = $key.' = '.$value;
  } else {
       $q[] = $key.' = "'.$value.'"';
  }
}
$q = implode(' AND ',$q);

What this does is it turns a longer $_GET set of variables into a string like this:
URL: getCars.php?Make=Claret&Model=2005&Tophats=Funny
$q: ‘Make = “Claret” AND Model = 2005 AND Tophats = “Funny”’

So when you stick that $q into your query (note that i changed the query string a bit too), you will execute the query:
SELECT * FROM MyTable WHERE Make = “Claret” AND Model = 2005 AND Tophats = “Funny” ORDER BY Advanced ASC

Now the hard(ish) part is going to be tweaking that Javascript function so that it constructs your URL in the way I showed above.

7

Thanks very much for explaining all of this to me, I’ll have a go at this and see how I get on. I really appreciate the help. If I’m stuck I might need to come back and ask somemore questions. Hope you’re around then if I need help!!

Thanks again.

8

Can anyone here help with the tweaking of the javascript function here so that it will construct the url the way i need it to be? I’ve tried the javascript forum but no one is replying and I really need to get this fixed tonyt!! Anyone have any ideas?