Recently I’ve faced with the necessity of adding location search mechanism into our application. The task I’ve been given was short and clear: “…We need to enter a few chars here and see the list of matching locations there…” I nodded, made myself a cup of coffee and started thinking on how I’m going to do it.

It was easy to guess that the task itself can be spitted into two parts: to build a component with combo-box behavior and to invent geocoding service to search locations by text entered in combo. Fortunately for me, we already have flexible dhtmlxCombo component, so the first part didn’t require any efforts from my side. There are also a set of free online geocoding services on the internet, so I’ve chosen Google Maps API for the second part.

Step 1. Prepare dhtmlxCombo

If by some chance you aren’t familiar with dhtmlxCombo component, it is a select-like control that has functionality to automatically fetch items when user types in it. What’s more important, it allows replacing standard behavior of finding items with user-defined function by attaching it to onDynXLS event. The event handler receives text entered into combo and that’s what we need. The code below demonstrates how easy it is:

“initCombo” function will be called after the page load.

At first we create combo box in html element with id=”comboID” and set its width to 200px.
The next line adds auto-complete features to the combo. The first parameter enables them and the next one sets up URL of the page where to look for the results. As geoservice will be used instead, I just entered “http://”. The last parameter enables or disables caching. Google geocoder has its own cache, that’s why I disabled this one.

Finally, we attach onDynamicLoad function to onDynXLS event. The handler returns “false” in order to stop default search functionality.

Step 2. Google Geocoder

Geocoding itself is a mechanism of converting geographical data (in our case address) into geographical coordinates. Google’s GClientGeocoder class makes it possible to search locations by address and receive collection of location objects as a result. Each of them contains coordinates and proper location address, i.e. all the information we need. The library itself can be downloaded here. It’s free with just a few limitations. You’ll be prompted to enter a site name for which API will be used. For test purposes “http://localhost” is quite enough.

So, briefly, how it works. We create GClientGeocoder class instance and call getLocations method which needs only 2 parameters: text to search location by and reference to the function that receives a result.

Seems to be quite easy. Now we just need to combine the things altogether.

Step 3. Getting things to work

Well, the strategic plan is the following: after dhtmlxCombo tries to fetch items the first time, GClientGeocoder is created, and all data requests are done through it. Geocoder callback function that receives locations becomes responsible for putting them into combo. That’s it.

This is how it looks in real life:

Some comments. “location”, returned by geocoder, contains collection of Placemark objects. Each of them represents one location. In the code above, coordinates of the location go to the combo item’s value. Address goes to item’s text. The black magic art, concentrated between (and including) lines with “enableFilteringMode”, is necessary because of not really obvious reason. When filtering mode is ON, any action that includes combo opening causes onDynXLS event to be fired. We need to open the combo, and we already are in onDynXLS event. The easiest way to prevent universal chaos in this case is to disable filtering before combo opening and enable it back afterwards.

The result works in all popular browsers and looks like this:

Follow this link to see it in action.

Instead of conclusion

Within approx 20 lines of JavaScript code we’ve managed to accommodate a tool that takes users input, asks Google what they mean and shows the list of locations with real coordinates they are probably interested in. Christopher Columbus could’ve killed for that. I’ve spent a bit more than an hour and got this for free Sometimes, I really love my job.

Posted by Paul Smirnov