Join Joe Chellman for an in-depth discussion in this video Solution: ZIP code lookup, part of jQuery Data with AJAX.
In this challenge, the goal was to stop people from having to type in zip code, city, and state. Just take the piece that we really need, and then let the form be filled in with the other parts. So if I fill in the zip code now, and tab off the field, this works. We're going to go through two possible solutions to this challenge, so as I mentioned. Ziptastic API has a little bit different structure, where as in the Sunlight API, we had the sunlighturl.com/legislator/locate, and then you passed in the parameters after that.
In the case of the Ziptastic API, the zip code is part of the request URL, and then the parameters follow afterwards. So, let's look at the code. Here's the first solution. Now, I've hooked up a change event to that zip code field. I'm using val to pull out the value of the zip code. And then I'm building a request URL by, just taking ziptasticapi.com and concatenating on the zip code. And then following that with this callback parameter that tells the API to return JSON instead of regular JSON.
So then I'm using get JSON, just like we did before. Sending it in the request URL. I'm passing in null as the second parameter, because we're not sending in any additional parameters. The part that changes, the zip code, is part of the request URL in this case. And then here in my call back, I'm logging the data to the console, so let's see that again. Fill in a different zip code. ANd here it is. So it's a very simple object, country state and city. And so I'm checking for value of city, and if there is one, I'm using it to update the value of the city field, likewise the state.
And this solution works just fine. The only thing about it, is that it requires me to fill out the zip code and then tab off the field before we make the update. So, another way that you could do this. Just comment this out. Another way to do this is to use the key up event. Now, the problem with using key up is that it fires every single time you type. Every single key triggers a key up event. So, instead of doing the look up every single time, there is a key press. I'm checking to see if the length of the zip code is five characters. And for a little extra credit, I'm using the jQuery is numeric function, which is a built in jQuery utility function that let's you check if a value appears to be numeric.
So even though the value returned by Val is a string, I can use is numeric to find out if it is all numbers. Everything else is the same. Then if I reload this, try it out. I can start to type nothing happens, nothing happens. Hit this last digit and there we go. It fires. And so now I can change this in real time, and it updates. So I think that the Ziptastic API is really handy, and it would be very nice to see this in wider deployment on more e-commerce websites. Or, you know, perhaps even just getting rid of the city and state fields entirely.
I think it's always good to look for areas where you can streamline the process, and the ZIPtastic api is a really handy way of doing this. So that completes the challenge.
This course is a short companion piece to jQuery for Web Designers. See that course for information about building your core jQuery skill set.