jQuery .on在沒有按鍵時觸發按鍵

我使用$(function() {});在頁面加載時運行jQuery事件。jQuery .on在沒有按鍵時觸發按鍵

我有一個數據過濾表單，使用3個輸入元素按關鍵字（year，make，model）過濾數據。所有三個類都有相同的類，我爲其分配了一個.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); 
    } 
}); 

});

是什麼原因造成這種現象？

UPDATE：

搜索表單：

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

UPDATE：

@Kevin B，@teewuane 我已經包裹在一個的setTimeout jQuery的請求，這基本上使它「等待」，直到它在鍵控後的n毫秒，w它點運行。這節省了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".

有趣的是，這似乎糾正了我遇到的錯誤。它傷害我不知道爲什麼。

來源

2012-09-17 AVProgrammer

您在每次連接之後都會發出ajax調用，這會導致您前進中的許多問題。我建議先加載數據並在本地過濾數據。另外，由於您沒有使用延遲，所以您可能遇到了與您的ajax調用相關的競爭條件。 – systemizer

我不會放棄on-keyup查找，但是您應該至少調整它並在新的查找啓動時中止現有的查找。 –

什麼類型的輸入是.filter_input？你有沒有像元素上的「自動對焦」的屬性？ – teewuane

我不會放棄on-keyup查找，但是至少應該調整它並在新的查找啓動時中止現有的查找。

來源

2012-10-31 00:41:37

jQuery .on在沒有按鍵時觸發按鍵

回答

相關問題