Suche Postleitzahlen schnell mit jQuery

Question

Ich habe eine Liste von Postleitzahlen, die ich mit jQuery suchen muss.

Ich habe die Zip-Codes in einer CSV-Datei wie folgt:

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

Die Liste ist ziemlich groß, über 4000 Einträge, Zip-Code und die entsprechende Stadt.

Was ist der schnellste Weg, um durch die Liste im Browser zu suchen? JSON? Wenn dies der Fall ist, wie kann ich die Liste in JSON oder ein anderes Format umwandeln, wenn es besser ist?

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

Kann mir jemand den einfachsten Weg zeigen, dies zu tun?

Aktualisieren Wäre es möglich/schneller, die geladene CSV-Datei nur mit Regex zu durchsuchen?

Update2 Ich bin auf der Suche nach einer exakten Übereinstimmung, und es ist nur die Suche gehen, wenn es 4 Zahlen aufweist.

Update3 Hier ist mein Code:

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

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

Kann mir jemand zeigen, mit diesem Code?

Answer 1

Dies ist eine Webseite, die Ihre CSV von einer URL in JSON konvertiert. Sie können es lokal auf Ihrem Computer verwenden. Verwendet JQuery und die CSV und Plug-Ins. Hinweis: Dieses Skript ist ein kurzer Hack, der für die angegebene CSV-Datei spezifisch ist.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script src="http://js-tables.googlecode.com/svn/trunk/jquery.csv.min.js"></script> 
<script src="http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"></script> 
<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> 

Mit den JSON-Daten, das ist nur ein Beispiel:

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

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

Answer 2

Für große Datenmengen würde JSON-Analyse langsam sein. Ich schlage vor, Sie ein einfaches stattdessen benutzerdefiniertes Format verwenden, wie diejenige, die Sie haben, ist in Ordnung:

2407;ELVERUM 
2425;TRYSIL 

Dann können Sie analysieren, wie:

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

Wo Daten sind nun eine Reihe von 2-Element-Arrays: erstens die Postleitzahl und zweitens der Name. Um dann zu suchen, würden Sie etwas wie tun:

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

Welcher bekommt Sie eine Reihe von Übereinstimmungen. Wenn Sie nur an genauen Übereinstimmungen interessiert sind, würde die Verwendung einer Karte besser funktionieren. In diesem Fall anstelle der ersten Zeile, könnten Sie dies tun, um die Zuordnung zu bauen:

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

Answer 3

bei 4.000 Einträge, sollten Sie es einfach als JSON parsen das Formular Sie vorgeschlagen:

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

Wenn Sie nach der genauen Übereinstimmung einer Postleitzahl suchen, erhalten Sie die schnellste Suchzeit. Wenn Sie etwas tun, bei dem der Benutzer "24" eingibt und Sie alle Postleitzahlen suchen müssen, die mit "24" beginnen, benötigen Sie etwas fortgeschritteneres.

Ich bin nicht sicher, welche Mechanismen jQuery für die Analyse von JSON bietet. So wie es normalerweise getan wird, ist eval verwenden:

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

Oder auf modernen Browsern können Sie die schneller und sicherer JSON-Bibliothek verwenden.

var zips = JSON.parse(data);