How to add a world city and state search autocomplete field to your website

Nick Rodriguez By Nick Rodriguez - Updated: September 13th, 2018
Posts 23    Views 136    Like 0
This may seem like a trivial task in 2018, but finding geoname city data can become a headache even if you are willing to pay for it. Learn a simple way to quickly and easily obtain this data and inte...

I recently had the opportunity to look for a quick and easy way to add an autocomplete field to a website, allowing users to search and select their home city and save to their profiles, a common task on most websites. What I thought would be a trivial task, since this is 2018 after all, turned out to be much more of a headache than I had imagined.

The first thing I noticed is that there are numerous proprietary services claiming to offer "free" world city databases or api's. But once you go through the lengthy sign up process, the data is either in the wrong format, outdated, or they will limit the number of requests you can use unless you upgrade to the premium service. But even if I am willing to pay for this service, it may be more important to use a standardized service that is easy to implement and will most likely still be around 4-5 years from now. I need something that I can just set and forget.

For this reason I decided against using a json api because most of these, especially the "free" ones, will probably stop working after a few years, or be intentionally crippled to force me into a premium service. I'd rather use something more predictable that will work the way I want.

And so began my journey in coming up with a complete, long-term solution that I could implement on my own.

Finding a world cities database

The first step was to come up with the requirements needed for this project, and that was simple. A database containing city names and regions or states, and it needed to be worldwide. Country data would help also but this is easy to acquire and doesn't change often.

There are several great services offering world city data, such as Maxmind and ip2location. But they are either too expensive for what I need, or provide too much data. Remember, I don't need anything fancy, just a simple drop-down box with a search that allows users to select their home city.

After some searching I settled on the geonames database, which appears to be the standard for people who are looking for regularly updated, standardized location data. The benefits of using this service is first, it's free to download and use the data for your own purposes, no account or registration needed. But the negative is that it's very rough and raw data that needs to be manually filtered and curated.

Automating the data curation


Now that I had the raw data I needed, it was time to figure out a way to automate the curation so that I can put this on autopilot. After a bit of research and testing I was able to create the database along with all necessary fields and tables, and properly clean up and import the data. You can check out that project here.

It's nice to have the data self-hosted and automated with a cronjob, no need to sign up for another subscription service or worry about outdated services or data. But it also gives the maximum amount of flexibility for people who only need the minimal amount of data or would like to customize how it is displayed to the user.

Displaying the data to the user

The next step in the process will be to display the data to the user so they can search and select their city. When looking for things like jquery libraries, it's very important to choose something that is well supported and popular so it has a better chance of staying around for years to come. Dealing with obsolete jquery libraries can become time consuming and annoying, so it's better to take the time to find the right one for the job.

I found a couple of projects that I liked, selectize and select2, but ultimately settled on select2 because of the superior documentation and community.

The last part will be to create your own api to send the json data to the jquery field. Most of these jquery autocomplete libraries operate by consuming a json feed either from an external source or locally. Once you have the data, it shouldn't be difficult to create your own locally hosted script that outputs the correct json data depending on the parameters, and integrate it with the jquery. Check the documentation for details on how to do that as it will vary for each implementation.

Conclusion

Some things that seem trivial to implement, can actually be much more involved, especially if you are thinking long-term and prioritizing simplicity and stability. Taking a little bit of extra time to complete a task properly can yield results and efficiency down the line that will give you much less headache in the future. Sometimes we become too reliant on proprietary subscription services that offer convenience or savings at the cost of less flexibility and future dependence. It's important to strike that balance between dependence, cost, and flexibility, you ultimately want to do what results in the most productivity, and most of that time that means going with the simplest solution.