自動提交AJAX搜索表單上的選擇過濾器更改

Question

我試圖通過AJAX在選擇框更改時自動提交搜索過濾器表單。問題是在整個#filter表格div上使用.change。如果我在#address輸入中輸入文字，則不會顯示結果。一旦我改變了選擇值，結果就會顯示出來。它可以很好地使用.submit，但需要它自動發送。

JS

$('#filter').change(function(e){ 
    e.preventDefault(); 
    var filter = $('#filter'); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 

     var place = autocomplete.getPlace(); 
     var elat = place.geometry.location.lat(); 
     var elng = place.geometry.location.lng(); 

     filter.append($('<input>',{type:'hidden', name:'elat'}).val(elat)); 
     filter.append($('<input>',{type:'hidden', name:'elng'}).val(elng)); 

    }); 

    $.ajax({ 
     url: filter.attr('action'), 
     data:filter.serialize(), 
     type: 'POST', // POST 
     dataType: 'json', 
     success: function(response) { 
      showCloseLocations(response); 
      $('#response').html(""); 
     } 
    }); 
    return false; 

}).change(); 

FORM（使用WordPress）

function search_form() 
{ 
    $address = $_GET['address']; 
    $widlat = $_GET['elat']; 
    $widlng = $_GET['elng']; ?> 

    <form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter"> 
    <input id="address" name="property_location" placeholder="Enter a city, country or postcode" type="text" value='<?php echo $address; ?>' required> 
    <input type="hidden" id="elat" name="elat" value='<?php echo $widlat; ?>'/> 
     <input type="hidden" id="elng" name="elng" value='<?php echo $widlng; ?>'/>  
     <select name="radius_miles" id="radius_km"> 
      <option value=1>+1 miles</option> 
      <option value=2>+2 miles</option> 
      <option value=5>+5 miles</option> 
      <option value=30 selected>+30 miles</option> 
     </select> 
     <input type="hidden" name="action" value="ek_search"> 
    </form> 

<?php 
} 
add_action('sco_search_form', 'search_form'); 

Answer 1

在JQuery中的所有事件都稱爲與（）方法。

在這裏，你有文件：http://api.jquery.com/on/

$(form).on('click', function(){}); 

$(form).on('focusin', function(){}); 

在這種情況下，它會像：

$("#filter").on('focusout', function(e){ 
    e.preventDefault(); 
    var filter = $('#filter'); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 

     var place = autocomplete.getPlace(); 
     var elat = place.geometry.location.lat(); 
     var elng = place.geometry.location.lng(); 

     filter.append($('<input>',{type:'hidden', name:'elat'}).val(elat)); 
     filter.append($('<input>',{type:'hidden', name:'elng'}).val(elng)); 

    }); 

    $.ajax({ 
     url: filter.attr('action'), 
     data:filter.serialize(), 
     type: 'POST', // POST 
     dataType: 'json', 
     success: function(response) { 
      showCloseLocations(response); 
      $('#response').html(""); 
     } 
    }); 
    return false; 

}); 

Answer 2

您需要將事件處理程序附加到每個可見input字段中輸入您的形式和使用的情況下input而不是change事件：

$('#filter :input:visible') 

的完整代碼：

$('#filter :input:visible').on('input', function (e) { 
    var filter = $('#filter'); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 

    var place = autocomplete.getPlace(); 
    var elat = place.geometry.location.lat(); 
    var elng = place.geometry.location.lng(); 

    filter.append($('<input>', {type: 'hidden', name: 'elat'}).val(elat)); 
    filter.append($('<input>', {type: 'hidden', name: 'elng'}).val(elng)); 

    $.ajax({ 
     url: filter.attr('action'), 
     data: filter.serialize(), 
     type: 'POST', // POST 
     dataType: 'json', 
     success: function (response) { 
      showCloseLocations(response); 
      $('#response').html(""); 
     } 
    }); 
}); 

<form action="xxx" method="POST" id="filter"> 
    <input id="address" name="property_location" placeholder="Enter a city, country or postcode" type="text" 
      value='<?php echo $address; ?>' required> 
    <input type="hidden" id="elat" name="elat" value='<?php echo $widlat; ?>'/> 
    <input type="hidden" id="elng" name="elng" value='<?php echo $widlng; ?>'/> 
    <select name="radius_miles" id="radius_km"> 
     <option value=1>+1 miles</option> 
     <option value=2>+2 miles</option> 
     <option value=5>+5 miles</option> 
     <option value=30 selected>+30 miles</option> 
    </select> 
    <input type="hidden" name="action" value="ek_search"> 
</form> 

Answer 3

如果你想在每次輸入字段改變時發送一個請求，你應該使用keyup()。

change()對於輸入和textarea只有當元素失去焦點時才更新。

看起來是這樣的：

var filter = $("#filter"), 
 
    listener = function (e) { 
 
     e.preventDefault(); 
 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 

 
      var place = autocomplete.getPlace(); 
 
      var elat = place.geometry.location.lat(); 
 
      var elng = place.geometry.location.lng(); 
 

 
      filter.append($('<input>',{type:'hidden', name:'elat'}).val(elat)); 
 
      filter.append($('<input>',{type:'hidden', name:'elng'}).val(elng)); 
 

 
     }); 
 

 
     $.ajax({ 
 
      url: filter.attr('action'), 
 
      data:filter.serialize(), 
 
      type: 'POST', // POST 
 
      dataType: 'json', 
 
      success: function(response) { 
 
       showCloseLocations(response); 
 
       $('#response').html(""); 
 
      } 
 
     }); 
 
     return false; 
 
    }; 
 

 

 
$('#address').keyup(listener); 
 
$('#radius_km').change(listener);