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

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);
});

这样，每当用户按下下一个键时，都会从上一个按键中清除超时，并且代码只会针对当前按键执行。

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