在 Enter 上制作搜索框 GET 页面答案

【问题标题】：Make Search Box GET Page on Enter在 Enter 上制作搜索框 GET 页面
【发布时间】：2016-10-04 04:45:30
【问题描述】：

当用户在其中输入内容并按 Enter 键时，我们希望使以下搜索框 GET 一个名为 /listings 的页面。有人对如何做到这一点有任何想法吗？非常感谢！

$(function() {

  var autocomplete;
  var geocoder;
  var input = document.getElementById('location');
  var options = {
    componentRestrictions: {
      'country': 'us'
    },
    types: ['(regions)'] // (cities)
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);

  $('#go').click(function() {
    var location = autocomplete.getPlace();
    geocoder = new google.maps.Geocoder();
    console.log(location['geometry'])
    lat = location['geometry']['location']['J'];
    lng = location['geometry']['location']['M'];
    var latlng = new google.maps.LatLng(lat, lng);

    // http://stackoverflow.com/a/5341468
    geocoder.geocode({
      'latLng': latlng
    }, function(results) {
      for (i = 0; i < results.length; i++) {
        for (var j = 0; j < results[i].address_components.length; j++) {
          for (var k = 0; k < results[i].address_components[j].types.length; k++) {
            if (results[i].address_components[j].types[k] == "postal_code") {
              zipcode = results[i].address_components[j].short_name;
              $('span.zip').html(zipcode);
            }
          }
        }
      }
    });

  });


});

<input type="text" id="location" name="location" placeholder="City or ZIP Code" />
<span class="zip"></span>

【问题讨论】：

您粘贴的 JavaScript 是否是问题的一部分？

标签： javascript jquery html css

【解决方案1】：

最简单的方法是在您的输入上为change 事件注册一个侦听器：

$('#location').change(function() {
  $.get('./listings', function(data) {
    // data is the content from '/listings'
  });
});

如果要将列表页面中的内容加载到特定元素中，可以使用jQuery.load：

$('#location').change(function() {
  // loads the html content of listings into your element
  // after the user changes the value of #location input
  $( "your-element-selector" ).load("/listings");
});

或者如果你想在浏览器中导航到your-page/listings，你可以看看this question

【讨论】：