Question

我正在使用$(function() {});在页面加载时运行jQuery事件。

我有一个数据过滤表单，它使用3个输入元素按关键字（年份，品牌，型号）过滤数据。这三个都有相同的类，我分配了一个.on("keyup")处理程序，它将输入的（一个或两个或三个）值提交给PHP脚本，返回json。

问题：在输入输入后，结果会按预期进行过滤，但是片刻之后，结果会再次加载，但这次好像页面刚刚加载（所有结果）。

以下是一些代码：

function load_vehicle_fitment(args) {
if(args === undefined) {
    args = {};
}

args['func'] = 'print_fitment';

$.get('ajax_get.php', args,
    function(data) {
        $('#fitment_data').html(data.html);
}, "json");
}


$(function() {
// INITIAL
load_vehicle_fitment();

// FILTER YMM COMBOS
$(".filter_input").on("keyup", function(e) {
    var typed_length = $(this).val().length;

    if(typed_length < 1 || typed_length > 2) {
        var args = {};
        var year = $("#year").val();
        var make = $("#make").val();
        var model = $("#model").val();

        if(year.length > 3) {
            args["year"] = year;
        }
        if(make.length > 2) {
            args["make"] = make;
        }
        if(model.length > 2) {
            args["model"] = model;
        }

        load_vehicle_fitment(args);
    }
});

});

导致此行为的原因是什么？

更新：

搜索表单：

<form name="vehicle_search" method="get" action="">
<input type="hidden" name="view" value="vehicles">
<input type="text" id="year" name="year" maxlength="4" size="2" class="filter_input" placeholder="Year" value="" style="padding: 3px;" autocomplete="off">
<input type="text" id="make" name="make" class="filter_input" placeholder="Make" value="" style="padding: 3px;">
<input type="text" id="model" name="model" class="filter_input" placeholder="Model" value="" style="padding: 3px;">
<input type="submit" value="Add" id="add_vehicle_button" disabled="disabled">
</form>

更新：

@Kevin B，@ hadwuane 我已经在一个setTimeout中包装了jQuery请求，它基本上使它“等待”直到它在一个keyup之后n毫秒，此时它运行。这样就可以保存http请求：

XHR finished loading: ".../ajax_get.php?year=1982&make=F". 
XHR finished loading: ".../ajax_get.php?year=1982&make=Fo". 
XHR finished loading: ".../ajax_get.php?year=1982&make=For". 
XHR finished loading: ".../ajax_get.php?year=1982&make=Ford".

有趣的是，这似乎纠正了我遇到的错误。我很难知道为什么会这样做。

Answer 1

我不会放弃on-keyup查找，但是你应该至少限制它并在启动新的查找时中止现有的查找。

没有按键时jQuery .on keyup触发

1 个答案: