javascript - 让搜索框在输入时获取页面

Question

我们希望当用户在其中输入内容并按回车键时，以下搜索框会获取名为/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>

Answer 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");
});

或者，如果您想在浏览器中导航至您的页面/列表，您可以查看 this question