Быстрый поиск почтовых индексов с помощью jQuery

Question

У меня есть список почтовых индексов, которые мне нужно искать через jQuery.

У меня есть zip-коды в CSV-файле, например:

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

Список довольно большой, более 4000 записей, почтовый индекс и соответствующий город.

Какой самый быстрый способ поиска по списку в браузере? JSON? Если это так, как я могу преобразовать список в JSON или другой формат, если лучше?

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

Может кто-нибудь показать мне способ сделать это?

Обновление Можно ли было бы / быстрее найти загруженный файл CSV с помощью Regex?

Update2 Я ищу точное совпадение, и оно будет искать, только когда у него 4 числа.

Update3 Вот мой код:

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

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

Может кто-нибудь показать мне, используя этот код?

Answer 1

При 4000 записей, вы должны просто проанализировать его как JSON, используя предложенную вами форму:

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

Если вы планируете выполнять поиск, выполняя поиск точного совпадения по почтовому индексу, это также даст вам самое быстрое время поиска. Если вы делаете что-то, когда пользователь вводит «24», и вам нужно найти все почтовые индексы, начинающиеся с «24», то вам понадобится что-то более продвинутое.

Я не уверен, какие механизмы jQuery предоставляет для анализа JSON. Обычно это делается с помощью eval:

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

Или в современных браузерах вы можете использовать более быструю и безопасную библиотеку JSON.

var zips = JSON.parse(data);

Answer 2

Это веб-страница, которая преобразует ваш CSV в JSON из URL. Вы можете использовать его локально на вашем компьютере. Использует JQuery и плагины CSV и JSON . Примечание: этот скрипт - быстрый взлом, специфичный для данного CSV.

<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>

Используя данные JSON, это всего лишь пример:

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

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

Answer 3

Для больших наборов данных анализ JSON будет медленным. Вместо этого я предлагаю вам использовать простой пользовательский формат, например, тот, который у вас есть:

2407;ELVERUM
2425;TRYSIL

Тогда вы можете разобрать как:

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

Где данные - это массив двухэлементных массивов: сначала это почтовый индекс, а потом имя Затем, чтобы выполнить поиск, вы должны сделать что-то вроде:

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

Что дает вам массив совпадений. Если вас интересуют только точные совпадения, лучше использовать карту. В этом случае вместо первой строки вы можете сделать это для построения отображения:

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