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

我试图使搜索过滤器表单在选择框更改时通过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();

$（'#过滤器'）。更改（函数（e）{
e、 预防默认值（）；
变量过滤器=$（“#过滤器”）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
var elat=place.geometry.location.lat（）；
var elng=place.geometry.location.lng（）；
append（$（''，{type:'hidden'，name:'elat'}）.val（elat））；
append（$（''，{type:'hidden'，name:'elng'}）.val（elng））；
});
$.ajax({
url:filter.attr（'action'），
数据：filter.serialize（），
键入：“POST”，//POST
数据类型：“json”，
成功：功能（响应）{
展示地点（回应）；
$（'#response'）.html（“”）；
}
});
返回false；
}).change（）；

表单（使用WordPress）

函数搜索\u表单（）
{
$address=$_GET['address']；
$widlat=$_GET['elat']；
$widlng=$_GET['elng']；？>
JQuery中的所有事件都使用on（）方法调用

这是您的文档：

在这种情况下，它将类似于：

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

});

$（“#过滤器”）.on（'focusout'，函数（e）{
e、 预防默认值（）；
变量过滤器=$（“#过滤器”）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
var elat=place.geometry.location.lat（）；
var elng=place.geometry.location.lng（）；
append（$（''，{type:'hidden'，name:'elat'}）.val（elat））；
append（$（''，{type:'hidden'，name:'elng'}）.val（elng））；
});
$.ajax({
url:filter.attr（'action'），
数据：filter.serialize（），
键入：“POST”，//POST
数据类型：“json”，
成功：功能（响应）{
展示地点（回应）；
$（'#response'）.html（“”）；
}
});
返回false；
});
您需要将事件处理程序附加到表单下的每个可见字段，并使用而不是事件：

完整代码：

$（'#过滤器：输入：可见'）。打开（'input'，函数（e）{
变量过滤器=$（“#过滤器”）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
var elat=place.geometry.location.lat（）；
var elng=place.geometry.location.lng（）；
append（$（''，{type:'hidden'，name:'elat'}）.val（elat））；
append（$（''，{type:'hidden'，name:'elng'}）.val（elng））；
$.ajax({
url:filter.attr（'action'），
数据：filter.serialize（），
键入：“POST”，//POST
数据类型：“json”，
成功：功能（响应）{
展示地点（回应）；
$（'#response'）.html（“”）；
}
});
});


如果要在每次更改输入字段时发送请求，应使用
keyup（）

change（）
用于输入和文本区域，仅在元素失去焦点时更新

可能是这样的：


var filter=$（“#filter”），
侦听器=函数（e）{
e、 预防默认值（）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
var elat=place.geometry.location.lat（）；
var elng=place.geometry.location.lng（）；
append（$（''，{type:'hidden'，name:'elat'}）.val（elat））；
append（$（''，{type:'hidden'，name:'elng'}）.val（elng））；
});
$.ajax({
url:filter.attr（'action'），
数据：filter.serialize（），
键入：“POST”，//POST
数据类型：“json”，
成功：功能（响应）{
展示地点（回应）；
$（'#response'）.html（“”）；
}
});
返回false；
};
$（“#地址”）.keyup（侦听器）；
$（'#radius_km'）.change（侦听器）
还有一个
.keyup（）
函数，您可以使用它：文本框不实现“更改”因此，您还需要使用其他方法来捕获这些事件。keyup是一个合理的选择，尽管您可能希望在输入3个字符之前停止自动发送，这样您就不会在服务器上搜索“a”之类的内容。JQuery中的所有事件都使用on（）方法调用此语句本身是不正确的。当然可以使用该语法声明所有事件处理程序，但并非总是必需的。有许多快捷方式方法，例如和，是一些更常用的方法。为了解决具体问题，“focusout”不会满足OP在用户键入内容时进行搜索的要求。在本例中，他们必须等待焦点离开文本框。IMHOThanks不太方便用户，它可以工作，但它现在在查询中循环多次，而不是在更改选择/输入时仅循环一次。每次更改选择执行的处理程序函数。如果只需要执行一次，则可以将.on（'input'）更改为.one（'input'，该选项也起作用，但会在之后停止任何选择（了解原因）但响应多次循环相同的结果。因此，例如，设置为选项值1的radius应该只输出两个帖子。相反，它将额外输出两个帖子8倍？希望图表能更好地解释这一点！-@scopeak为了解决此问题，您需要决定是否需要将数据发布到服务器。您可以通过添加所选选项的属性：.attr（'dontajax'
$(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;

});

$('#filter :input:visible')