Question

我想在更改选择框时通过AJAX自动提交搜索过滤器表单。问题是在整个.change表单div上使用#filter。如果我在#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

您需要将事件处理程序附加到表单下的每个可见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 2

如果您想在每次更改输入字段时发送请求，请使用keyup()。

change()输入和textarea只有在元素失去焦点时才会更新。

看起来像这样：

＆＃13;

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);

＆＃13;

Answer 3

使用on（）方法调用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;

});

在选择过滤器更改时自动提交AJAX搜索表单

3 个答案: