1

我正在使用$(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，@teewuane 我已经将 jQuery 请求包装在一个 setTimeout 中，这基本上使它“等待”，直到它在 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".

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

4

1 回答 1

0

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

于 2012-10-31T00:41:37.680 回答