What you want has to be done in javascript.
The search page gets a custom page template, it incorporates (either include or inline) the data array of states and cities list, and also the javascript which loads the listbox controls, and watches for changes in selections.
Be sure to test the resulting search page across all the browseres your clients use since there are javascript differences between them.
Ross pretty much covered it, but I’d like to add one thing.
It’d be a good idea on the state change event to make an AJAX request to query for all distinct cities in the selected state that are related to any of the brands. Thus whatever city the user picks will return a result. The drawback would be the user may not see the city they are interested in.
If you just arbitrarily listed a bunch of cities, there’s a fair chance the selected city will not return anything, especially when a new site’s content is still limited.
A related search scheme would be to do a geographic radius search from an arbitrary selected city to increase the chance of the user getting results returned. This of course would require all the cities be geocoded and you would need the appropriate geodetic calculations to determine distances between two point’s latitudes and longitudes.
Thanks so much you two! I’m doing some additional research on the subject right now, I’ve never needed to pass information from a server-side php database to javascript before so this will be a new experience for me. Any useful links or resources you might have in addition to this would be greatly appreciated. Thanks a bunch either way!
And yeah bc- that was definitely a concern we’re facing right now, whether to only add cities we currently have, or just add them all, most of which would turn up empty. We don’t want people to think the search function is some how broken though, so I think we will stick only to cities that have been added, and make it well known on the site that the database is still a baby that’s in its growing stages!
We’ve thought about the geographic radius thing as well, but are trying to calm our vision into something more manageable at the moment so we can see where it goes first. Maybe in the future though!
Thanks again 🙂
Alright, so thought I’d post progress. This whole thing may be way over my head, I’m pretty new to more advanced stuff like this. I found a JS code that works for the handling. It was originally meant to do this for countries and states, rather than states and cities so pardon if the code is a little missnamed at the moment. I only edited the options.
// States
var country_arr = new Array("California", "Colorado", "Texas");
// Cities
var s_a = new Array();
s_a[0]="";
s_a[1]="Los Angeles|San Diego|San Francisco";
s_a[2]="Boulder|Denver";
s_a[3]="Austin|Dallas|Houston";
function populateStates( countryElementId, stateElementId ){
var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex;
var stateElement = document.getElementById( stateElementId );
stateElement.length=0; // Fixed by Julian Woods
stateElement.options[0] = new Option('Select State','');
stateElement.selectedIndex = 0;
var state_arr = s_a[selectedCountryIndex].split("|");
for (var i=0; i<state_arr.length; i++) {
stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
}
}
function populateCountries(countryElementId, stateElementId){
// given the id of the <select> tag as function argument, it inserts <option> tags
var countryElement = document.getElementById(countryElementId);
countryElement.length=0;
countryElement.options[0] = new Option('Select Country','-1');
countryElement.selectedIndex = 0;
for (var i=0; i<country_arr.length; i++) {
countryElement.options[countryElement.length] = new Option(country_arr[i],country_arr[i]);
}
// Assigned all countries. Now assign event listener for the states.
if( stateElementId ){
countryElement.onchange = function(){
populateStates( countryElementId, stateElementId );
};
}
}
Now I’m just totally stumped on how to go about passing all top-level terms for the “brand-location” taxonomy I’m using on the site into the first array for the states and then the respective child terms to the second array that defines the options for each State upon selection. Any ideas/things I could refer to? Am I on the right track at all?
Perhaps you know this already, but just in case, you should know that all javascript in WP should be enqueued. There is a related function that allows you to pass PHP sourced data, or “localize” it.
All the cities in all the states may not amount to much now, but (hopefully 🙂 ) it will grow to be a lot of data. Passing all of that when the page loads could begin dragging down the page load speed. When that happens you’ll want to look at AJAX to get the cities for the selected state. You’ll want to know then that AJAX in WP is a bit different than most of the generic tutorials would indicate. This article would be helpful for this:
https://developer.wordpress.org/plugins/javascript/ajax/
