Возвращение города и штата на основе почтового индекса

Question

Я бы хотел, чтобы на экране появился «город» и «состояние», основанный на том, что пользователь «почтового индекса» набрал текст в текстовое поле. У меня есть текстовый файл из 3 столбцов в zip, city и state. Каков наиболее эффективный способ структурирования функции javascript для этого?

Answer 1

Preprocess ваш текстовый файл в объект JSON формы

{ 
    "10461": { City: "Bronx", State: "NY" } 
    ... 
} 

Если вы действительно ленивы, вы можете использовать d3.nest, чтобы сделать это непосредственно из текстового файла. Тем не менее, было бы замечательно для ваших клиентов, если бы вы сделали это один раз и просто сохранили JSON, а не каждый клиент загружал текстовый файл и делал это повторно.

Как только у вас есть это, легко ... просто прочитайте объект JSON и проиндексируйте его с помощью почтового индекса и захватите город/штат.

Answer 2

Google является вашим другом: Css-tricks did a tutorial for exactly what you're asking (+ несколько вариантов)

Answer 3

1) Вы должны определить функцию сервера, который будет возвращать город и штат в формате JSON, основанный на почтовый индекс. 2) Подпишитесь на изменения, ввод и ввод событий в поле ввода. 3) Определите функцию JavaScript, которая вызовет функцию сервера с помощью AJAX. В функции успеха вы устанавливаете поля с помощью ответа.

Я наклеивать на сторону клиента коды ниже:

$("#txtZipCode").bind("change keyup input", function (e) { 
     var field = $(this); 
     if (field.val().length === 5) { 
      showLocation(field.val()); 
     } 
     else 
      showLocation(""); 
    }); 

function showLocation(zipCodeValue) { 
    var txtCity = $("#city"); 
    var txtState = $("#state"); 
    if (zipCodeValue.toString().length != 5) { 
     txtCity.val(""); 
     txtState.val(""); 
    } 
    else { 
     $.ajax({ 
      dataType: "json", 
      url: "Location/GetZipCode", 
      data: 
       { 
        zipCodeNumber: zipCodeValue 
       }, 
      success: function (data) { 
        txtCity.val(data.City); 
        txtState.val(data.State); 
      } 
     }); 
    } 
}