JQuery的延遲KEYUP搜索

我有這樣的代碼隱藏除了一個我搜索了每.flip元素：JQuery的延遲KEYUP搜索

var $rows = $('.flip'); 
$('#search').keyup(function() 
{ 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
    $rows.show().filter(function()          
    { 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(val); 
    }).hide(); 
});

這裏的問題是，它會每次我發佈一個關鍵時期。我怎麼才能讓它等到我停止打字

謝謝！

來源

2016-10-21 Hiroo17

使用'change'事件而不是'keyup'。 – Azim

@Azim'change'是一個危險的選擇，一些瀏覽器/平臺只會在元素失去焦點後纔會觸發它，而這通常不是您想要的搜索功能。 – DBS

'keyup'和'change'不會通過鼠標粘貼文本，所以他應該使用'input'事件。 – skobaljic

只需使用setTimeout

$(document).ready(function() { 
 
    var timer; 
 

 
    var $rows = $('.flip'); 
 
    var $self = $(this); 
 

 
    $('#search').keyup(function() { 
 
    clearTimeout(timer); 
 

 
    timer = setTimeout(function() { 
 
     $('#test').text(Math.floor(Math.random() * 1000)); 
 
     var val = $.trim($self.val()).replace(/ +/g, ' ').toLowerCase(); 
 

 
     $rows.show().filter(function() { 
 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
 
     return !~text.indexOf(val); 
 
     }).hide(); 
 
    }, 300); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="search"/> 
 
<span id="test"></span>

來源

2016-10-21 10:43:41 Justinas

無效：/ – Hiroo17

@ Hiroo17我的例子不適合你？控制檯錯誤？ – Justinas

你的例子工作正常，但我在我的代碼中實現它的那一刻它不起作用 – Hiroo17

您需要使用去抖，我建議lodash它。

我用這樣的：

var debounce = _.debounce(search, 500, false); 

$('#search-input').on('change', function() { 
    debounce(this); 
}); 

function search(input) { 
    if(input.value.length > 2) { 
    ... 
    } 
}

_.debounce會做等待用戶停止插入值的工作。

第一個參數是您希望在等待用戶停止插入值後調用的函數。

第二個參數是等待插入下一個值的時間（以毫秒爲單位）。

第三個參數是配置選項，使用false會使它發送插入的最後一個值。

來源

2016-10-21 10:56:17 Giovane

JQuery的延遲KEYUP搜索

回答

相關問題