Search zip-codes fast with jQuery

Question

I have a list of zip-codes that I need to search trough using jQuery.

I have the zip-codes in a CSV file like this:

2407;ELVERUM
2425;TRYSIL
2427;TRYSIL
2446;ENGERDAL
2448;ENGERDAL

The list is pretty big, over 4000 entries, zip-code and corresponding city.

What the fastest way to search trough the list in the browser? JSON? If that's the case, how can I convert the list to JSON or another format if better?

{
     "2407": "ELVERUM",
     "2425": "TRYSIL"
}

Can someone show me the mest way to do this?

Update Would it be possible/faster to search the loaded CSV file with just Regex?

Update2 I'm looking for an exact match, and it's only going to search when it has 4 numbers.

Update3 Here is my code:

$('#postnummer').keyup(function(e) { 
 if($(this).val().length == 4) { 
 // Code to search the JSON for an exact match.  
 } 
});

$.getJSON("data.json",function(data){
});

Can anyone show me using this code?

Answer 1

For large data sets, JSON parsing would be slow. I suggest you use a simple custom format instead, like the one you have is fine:

2407;ELVERUM
2425;TRYSIL

Then you can parse like:

var data = dataContent.split('\n').map(function(line){ return line.split(';'); })

Where data is now an array of 2-element arrays: first being the zipcode and second the name. Then to search through, you would do something like:

var foundItems = data.filter(function(p){ return p[0].indexOf(query) != -1; });

Which gets you an array of matches. If you are only interested in exact matches, using a map would perform better. In which case, in place of the first line, you might do this to build the mapping:

var map = {};
dataContent.split('\n').forEach(function(line){
    var p = line.split(';');
    map[p[0]] = p[1];
});

Answer 2

At 4,000 entries, you should just parse it as JSON using the form you suggested:

{
     "2407": "ELVERUM",
     "2425": "TRYSIL"
}

If you are planning to search by looking for the exact match of a zipcode, this will also give you the fastest search time. If you do something where the user types "24" and you need to find all zipcodes that begin with "24", then you will need something a little more advanced.

I'm not sure what mechanisms jQuery provides for parsing JSON. The way it is typically done, is to use eval:

var zips = eval("(" + data + ")");

Or on modern browsers, you can use the faster and safer JSON library.

var zips = JSON.parse(data);

Answer 3

This is a web page that will convert your CSV to JSON from a URL. You can use it locally on your computer. Uses JQuery and the CSV and JSON plug-ins. Note: this script is a quick hack specific to the CSV given.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script src="http://js-tables.googlecode.com/svn/trunk/jquery.csv.min.js"&gt;&lt;/script&gt;
<script src="http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"&gt;&lt;/script&gt;
<script>
jQuery(function($){

$('#conv').click(function(){
    $.get($('#myurl').val(), function(data){
     var csvobj = {};
     var csvray = $.csv(';')(data);
     $(csvray).each(function(){
      csvobj[this[0]] = this[1];
     });
     $('#jsondata').val( "areacodes=" + $.toJSON(csvobj) );
    });
});

});
</script>
Url to CSV: <input type="text" id="myurl" value="tilbud5.csv" />
<input type="button" id="conv" value="convert url to json" />
<br/>
<textarea id="jsondata" rows="1000" cols="100"></textarea>

Using the JSON data, this is just an example:

$('#postnummer').keyup(function(e) { 
    if($(this).val().length == 4) { 
        alert(areacodes[$(this).val()]);
    } 
});

$.getJSON("data.json?callback=?");