Limit Number of Results for Autocomplete Based on Dropdown Selection - php

Question

I'm trying to figure out a couple things here and seem to be pretty close but hit a road block. My issue is, after I select a dropdown option (used to filter a large number of results), the results which should be available when I start typing in the autocomplete box are not available. If I hardcode a value that the dropdown is passing and start typing in the autocomplete box, everything works fine. It's only when I pass in that value that I am having the issue.
I have two PHP pages, one containing the layout which includes a dropdown (SQL for its results) and an autocomplete box and the other which contains the SQL for the autocomplete.
search.php
<select id="loc">
<?php
// sql for dropdown
while ($row = odbc_fetch_array($result)) {
echo "<option value\"".$row['Location']"\">".$row['Description']."</option>";
}
?>
</select>
<label for="search">Search: </label>
<input type="text" id="search" />
<script>
// Send value entered in the autocomplete box to data.php for it to be used in sql statement
$(document).ready(function(){
$('#search').autocomplete({
minLength: 3,
source: function(query, process) {
$.ajax({
url: 'data.php',
type: 'GET',
data: "name=" + $('#search').val(),
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
}
});
});
// Append selected dropdown value to URL so it can be accessed
$(document).ready(function() {
$('#search').change(function() {
var res = $(this).val();
location.href = "search.php?src="+res;
});
});
</script>
data.php
<?php
if (isset($_GET['src'])) {
$loc = $_GET['src'];
$fullname = explode(" ", $_GET['name']);
$sql = "SELECT p.lastname + ', ' + p.firstname as fullname,
l.city as city
FROM people p
JOIN location l on p.city = l.city
WHERE p.lastname like '".$fullname[1]."%' AND p.firstname like '".$fullname[0]."%'
AND l.city = '$loc'
GROUP BY p.lastname + ', ' + p.firstname, l.city
ORDER BY p.lastname + ', ' + p.firstname";
// DB connection and execute connection here
$array = array();
while ($row = odbc_fetch_array($db)) {
$array[] = $row['fullname'];
}
echo json_encode($array);
}
?>
So when I have my code like this and select an option from the dropdown, it runs through the select statement since the selected value is being passed in. If I echo the results on the search.php page, they are filtered correctly or if I navigate directly to the data.php page and pass in the correct parameters everything is correct. After I make a selection though, and start typing in the autocomplete box, I'm not getting any results. I'm guessing I need to somehow filter the results based on the selection, get those results and run a different query when I start typing?
Thanks in advance for any help and please let me know if I'm not clear on anything.

Answer 1

Well just like it ususally happens, after taking a break from it I've got it working now.
Below is the revised code with comments showing what I changed.
search.php
<select id="loc">
<?php
// sql for dropdown
while ($row = odbc_fetch_array($result)) {
echo "<option value\"".$row['Location']"\">".$row['Description']."</option>";
}
?>
</select>
<label for="search">Search: </label>
<input type="text" id="search" />
<script>
/* Send value entered in the autocomplete box to data.php
* for it to be used in sql statement */
$(document).ready(function(){
$('#search').autocomplete({
minLength: 3,
source: function(query, process) {
// Added the variable below to get the dropdown's selected value
var res = $('#loc').val();
$.ajax({
url: 'data.php',
type: 'GET',
// Edited: included the dropdown value
data: "src="+res + "&name=" + $('#search').val(),
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
}
});
});
/* This event is not needed since the value is set when a selection
* is made. 'change' passed that value to search.php causing
* the query to run without the search value. This caused a HUGE
* number of results, and usually causing the page to timeout.
* Making sure all variables get passed prior to running the query
* is a must. I knew this but got stuck on how to make it work. */
// Append selected dropdown value to URL so it can be accessed
//$(document).ready(function() {
// $('#search').change(function() {
// var res = $(this).val();
// location.href = "search.php?src="+res;
// });
//});
</script>
data.php
<?php
if (isset($_GET['src'])) {
$loc = $_GET['src'];
}
// Moved the $loc variable into the if statement above
// $loc = $_GET['src'];
$fullname = explode(" ", $_GET['name']);
$sql = "SELECT p.lastname + ', ' + p.firstname as fullname,
l.city as city
FROM people p
JOIN location l on p.city = l.city
WHERE p.lastname like '".$fullname[1]."%'
AND p.firstname like '".$fullname[0]."%'
AND l.city = '$loc'
GROUP BY p.lastname + ', ' + p.firstname, l.city
ORDER BY p.lastname + ', ' + p.firstname";
// DB connection and execute connection here
$array = array();
while ($row = odbc_fetch_array($db)) {
$array[] = $row['fullname'];
}
echo json_encode($array);
?>
I haven't finished a couple pieces on the main page such as disabling/hiding the autocomplete box until a selection is made from the dropdown and adjusting the query for additional filtering but those are next on my list. I'm sure there are a few other things I could clean up as well but my first goal was to get it working correctly and that's accomplished now!
If anyone is using php and has a few hundred thousand + results and would like to use an autocomplete box to filter those without waiting a ridiculous amount of time for the results to display, I hope this may be of some help. Not nearly as complex as I originally made it out to be but over thinking it will do that to you. Also, even though it's working now, feel free to add some suggestions and apologies for any grammatical errors!