Javascript Rails-用户使用JQUERY填充/更改邮政编码位置

我正在开发一个电子商务应用程序，它要求用户输入他/她的邮政编码位置，以显示更靠近他/她的地区的列表。我有一个弹出窗口，并对ziptasticapi.com进行api调用，我能够获得给定邮政编码的城市、州和国家。代码如下：

 $('#locationModal').on('shown.bs.modal', function (e) {
  $('#zipcode-name').keyup(function (e) {
      var zipCode = $("#locationModal").find("input[name='zip']").val();
      if (zipCode.length===5 && $.isNumeric(zipCode)){
        var requestURL = 'http://ziptasticapi.com/' + zipCode + '?callback=?';

        $.getJSON(requestURL, null, function(data){
          console.log(data);
          if (data.city) $("#locationModal").find("input[name='city']").val(data.city);
          if (data.state) $("#locationModal").find("input[name='state']").val(data.state);

        });
      }
  });
});

我在弹出窗口中填充城市和州，但在导航栏首页中显示城市和州时遇到问题。我要找的正是： 1.当用户自动访问电子商务网站时，会出现一个弹出窗口，要求输入zipcode。 2.在我的导航栏中显示用户城市和州，并选择更改位置。 3.使用用户提供的zipcode搜索项目列表并显示更接近用户的项目

我该怎么做？请帮我一下。 提前谢谢

我正在使用Spree电子商务，除了产品模型之外，我还创建了另一个模型，名为listing。在我的清单模型中，我将zipcode作为数据库列，以便能够在此模型上通过zipcode进行搜索

出于某种原因，我认为最好有另一个称为Zip的模型，将zipcode、city、state和country存储在数据库中，并将此Zip模型与列表关联。我想让zip和你一起上市

这就是我目前掌握的前端代码：

      <nav class="col-md-12">
         <div id="location-nav-bar" class="nav navbar-nav navbar-right">
           <%= link_to 'change location', '#', {'data-toggle' =>  "modal", 'data-target' => '#locationModal'}  %>     

“模式”，“数据目标”=>“#位置模式”}%>

新消息
&时代；
邮政编码：
首脑会议

（函数（$）{
$（'locationModal'）.on（'show.bs.modal'，函数（e）{
$（'#zipcode name'）.keyup（函数（e）{
var zipCode=$（“#locationModal”）.find（“输入[name='zip']）.val（）；
//window.alert（zipCode）；
if（zipCode.length==5&&$.isNumeric（zipCode））{
//window.alert（zipCode）；
//console.log（zipCode）；
var requestURL=http://ziptasticapi.com/“+zipCode+”？回调=？”；
$.getJSON（requestURL，null，函数（数据）{
控制台日志（数据）；
if（data.city）$（“#locationModal”）.find（“输入[name='city']”）val（data.city）；
if（data.state）$（“#locationModal”）.find（“输入[name='state']”）val（data.state）；
}); 
}
});
})
})（jQuery）；

您能为我们提供您的代码的最低示例吗？很难从你的问题的答案中判断出你想要什么。我添加了一些代码。你能给我们提供一个代码的最小示例吗？很难从你的问题的答案中判断出你想要什么。我添加了一些代码。

    <div class="modal fade" id="locationModal" tabindex="-1"    role="dialog" aria-labelledby="locationModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">New message</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
             </button>
      </div>
    <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="recipient-name" class="form-control-label">ZIP Code:</label>
        <input type="text" class="form-control" name="zip", id="zipcode-name">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" name="city", id="city-name">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" name="state", id="state-name">
      </div>
    </form>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" name="summitcode", id="zipcode-summit">Summit</button>
  </div>
</div>

 <script type="text/javascript">

  (function($){

$('#locationModal').on('shown.bs.modal', function (e) {
  $('#zipcode-name').keyup(function (e) {
      var zipCode = $("#locationModal").find("input[name='zip']").val();
      //window.alert(zipCode);
      if (zipCode.length===5 && $.isNumeric(zipCode)){
        //window.alert(zipCode);
        //console.log(zipCode);
        var requestURL = 'http://ziptasticapi.com/' + zipCode + '?callback=?';

        $.getJSON(requestURL, null, function(data){
          console.log(data);
          if (data.city)  $("#locationModal").find("input[name='city']").val(data.city);
          if (data.state) $("#locationModal").find("input[name='state']").val(data.state);

         }); 
    }

  });
})

})(jQuery);

</script>