Make Search Box GET Page on Enter

Question

We want to make the following search box GET a page named /listings when a users types something in it and hits enter. Does anyone had any ideas on how to do this? Many Thanks!

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

Is the JavaScript you pasted part of the question? – Ankit Gupta Jun 04 '16 at 10:03 — Ankit Gupta, Jun 04 '16 at 10:03

score 0 · Accepted Answer · edited May 23 '17 at 12:22

The easiest way would be to register a listener for the change event on your input:

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

If you want to load the contents from the listings page into a specific element, you can use 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");
});

Or if you want to navigate to the your-page/listings in the browser, you can take a look at this question

Make Search Box GET Page on Enter

1 Answers1