Machen Suchfeld GET Seite auf Geben Sie

Question

Wir möchten das folgende Suchfeld eine Seite mit dem Namen/Listings bekommen, wenn ein Benutzer etwas darin eingibt und drücken Sie die Eingabetaste. Hat jemand irgendwelche Ideen, wie man das macht? Vielen Dank!

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

Der einfachste Weg, einen Listener für das change Ereignis auf Ihrer Eingabe zu registrieren wäre:

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

Wenn Sie den Inhalt der Inserate Seite in eine zu ladende spezifisches Element, können Sie jQuery.load verwenden:

$('#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"); 
}); 

Oder wenn Sie im Browser zu your-page/listings navigieren möchten, können Sie einen Blick auf this question