I'm pulling the values for my autocomplete form field from a db table which has the names of most of the cities in the world as well as a unique numeric ID for each city. The list is filtered by the country previously selected. For example if someone types is "Los" the autocomplete will show "Los Angeles" as one of the options. I can concatenate that city's ID to the city names so that if they select "Los Angeles" from the pop up list the form field will show "Los Angeles [City ID: 11111]". I can't use the city name (many cities can share the same name), what I need is the city ID as my unique identifier.
My question is how can I isolate the ID number of the selected city so I can put it in a hidden field. Ideally I'd like to keep the cityID invisible to the user while storing their selected cityID in my db.
This is the callback code I'm using:
function globalize_city_autocomplete($string = '') {
$countryID = $_SESSION['selected_country'];
$matches = array();
if ($string) {
$result = db_query_range("SELECT cityName, cityID FROM {globalize_cities} WHERE countryID = '%s' AND LOWER(cityName) LIKE LOWER('%s%%')", $countryID, $string, 0, 10);
while ($city = db_fetch_object($result)) {
$matches[$city->cityName.' [City ID:' .$city->cityID.']'] = check_plain($city->cityName);
}
}
print drupal_json($matches);
}
When the autocomplete list pops up only the city names are shown. Once a selection is made the textfield shows "City Name [City ID: 00000] ( for example if I select Los Angeles from the pop up list the textfield is populated with "Los Angeles [City ID: 12345]")
Hope it makes sense. Thanks in advance for any input.
Comments
Possible solution
In case anyone else decides they want this kind of functionality I found a patch and some instructions on how to make this work. I haven't tried it yet so hopefully it will work for me.
http://drupal.org/node/322383
PHP solution
I just don't know enough about Javascript to get this to work with that approach. I'm very green with coding in general but I did come up with an alternative hack. These are the steps in case anyone not familiar with Javascript wants to do something similar.
In the autocomplete function you can format the pop up values one way and what's actually put into the field can be formatted differently. Below is where I declare what these values should be for my autocomplete field inside the autocomplete callback.
When the user types into the autocomplete field only the matching cityName values pop up. This is the value on the right of the = sign.
After they make a selection the autocomplete form field is populated with the concatenated value on the left of the = sign. The resulting string is "cityName|cityID" (an actual value would be something like "New York|123545"). This string is ugly but it only appears on the field for a split second and is replaced via ahah (I'm using the AHAH helper module) by the city name alone ("New York" in this case).
The cityID value is then put into a hidden form element so I can use it on submit. Since I already have these values in my db the cityID value is all I need, the city's name is just for the user's benefit. This is working great so far for me and here's how it works:
In my form function I use the explode() function on the "cityName|cityID' string using "|" as the separator. This changes the string to an array with cityName in position 0 and cityID in position 1. Since my form element is ahah enabled the function is run as soon as the value is put on the field (
'event' => 'blur'inside the'#ahah'array) which is why this ugly string only appears for a split second. See below for part of code where it all happens:Again, I'm fairly new to coding but this worked great for me. I'm sure someone with more experience has an even better way or can improve on this approach. If this helps anyone I'll be glad I could finally give back to the community after all the help I've received to get me to this point.
I have yet another solution
On this issue, I posted a patch that allows this to be a pure js solution with only a small change to the autocomplete.js
http://drupal.org/node/365241
That's great!
I think this type of functionality makes autocomplete form fields a lot more powerful. Thanks for sharing.