Last night I got to work creating a that allows the user to quickly start typing a suburb name and they can watch the postcodes appear in front of them.
In this post I want to briefly explain how I built it and why it runs so fast.
Storing the Data (postcodes, suburbs) Locally
First of all the biggest decision I had to make for the app was if I should store the data on the Kaiserapps website or store it locally. There were a lot of benefits to storing the data locally I just had to find out how to best implement it and I ended up deciding to store it locally for the better.
Finding the postcode data was simple as I just had to download a CSV from the Australia Post website and import it into MySQL (using my web developer tools
var data =
In the end I just made the following modifications to the data:This way I could load the data file as a Javascript file in my html and it would just treat data as a Javascript variable containing that data. Then in my applications Javascript I simply ran a check for it in the $(document).ready() like so;
$(document).ready(function() { if(data !== undefined){ // the data loaded just fine loaded = true; }});
Just make sure you import the JSON file as if it were a Javascript file for it to load the data into the data variable.
Once this was done, all I needed to do was iterate over the array like so:
for(var index in data){ iter_item = data[index];}
And that there is all there was too it. The rest of the logic for the matching algorithm, keyboard input handling, etc is my own secret sauce and you will just have to view the source of my application to find it :P
Why is it So Fast?
Well that is actually quite simple, because all the data is local, and because I set the key delay between the typing and the lookup at 100 milliseconds, the response is almost immediate. It even runs well on mobile devices
