javascript - 必须有更好的方法 - 随着用户输入的变化而更改搜索

Question

我有一个搜索过滤器，当用户在表单输入中输入文本时，它会隐藏 s 。我需要它是动态的，以便当用户更改输入时，过滤器会刷新。我通过在每次按键时清除过滤器来实现此目的，但这会导致过滤器延迟并在快速输入单词时闪烁。你可以在这里明白我的意思:

http://cambridgefellows.com/directory-of-fellows/

这是我的 jquery:

$(document).ready(function() {
   $('input[name=searchFilterInput]').val('');
   $('input[name=searchFilterInput]').keyup(function() { 
    var searchFilterVal = $('input[name=searchFilterInput]').val();
    searchFilterVal = searchFilterVal.replace(/ /g, '-');
    searchFilterVal = searchFilterVal.toLowerCase();
    $('tr.hide').fadeIn('slow').removeClass('hide');

    if(searchFilterVal == '') {
        $('tr.hide').fadeIn('slow').removeClass('hide');
    } else {

        $('tr.fellows').each(function() {
        var pattern = $(this).attr('class');    // the pattern to be matched 
        var match = pattern.match(searchFilterVal);//If pattern matches it returns the match

        if(!match) {
                $(this).fadeOut('normal').addClass('hide');

            } else {
            }
        });
    }
   });


$('#searchForm').bind("keyup keypress", function(e) {
 var code = e.keyCode || e.which; 
  if (code  == 13) {               
    e.preventDefault();
     return false;
  }
});



});

我认为必须有一种更简单的方法来处理这个问题，以便过滤器在用户输入或更改搜索文本时动态更新。比我更有经验的人可以看看这个并启发我了解我忽略的明显事情吗？非常感谢您的帮助。

Answer 1

看起来您需要 setTimeout 和 clearTimeout。

var timer;
$('input[name=searchFilterInput]').keyup(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        var searchFilterVal = $('input[name=searchFilterInput]').val();
        searchFilterVal = searchFilterVal.replace(/ /g, '-');
        searchFilterVal = searchFilterVal.toLowerCase();
        $('tr.hide').fadeIn('slow').removeClass('hide');

        if(searchFilterVal == '') {
            $('tr.hide').fadeIn('slow').removeClass('hide');
        } else {

            $('tr.fellows').each(function() {
            var pattern = $(this).attr('class');    // the pattern to be matched 
            var match = pattern.match(searchFilterVal);//If pattern matches it returns the match

            if(!match) {
                    $(this).fadeOut('normal').addClass('hide');

                } else {
                }
            });
        }
    }, 300);
});

这样，每当用户按下下一个键时，前一个按键的超时时间就会被清除，并且代码只会针对当前的按键执行。

如果您觉得更新速度不够快，请减少毫秒数。