Question

我有以下代码，当用户在文本框中输入时，我想用它来搜索数据库。下面的代码工作正常，但似乎有点低效，就好像用户打字速度非常快。我可能会进行比必要更多的搜索。因此，如果用户输入“航行”，我正在搜索“帆”，“赛丽”，“赛林”和“帆船”。

我想知道是否有办法检测按键之间的任何特定时间，因此只搜索用户是否停止输入500毫秒或类似的事情。

这样的事情是否有最好的做法？

$('#searchString').keypress(function(e) {

    if (e.keyCode == 13) {

        var url = '/Tracker/Search/' + $("#searchString").val();
        $.get(url, function(data) {
            $('div#results').html(data);
            $('#results').show();
        });
    }
    else {

        var existingString = $("#searchString").val();
        if (existingString.length > 2) {
            var url = '/Tracker/Search/' + existingString;
            $.get(url, function(data) {
                $('div#results').html(data);
                $('#results').show();
            });
        }
    }

Answer 1

您可以这样做：

$('#searchString').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode == 13)
      search(true);
    else
      $(this).data('timer', setTimeout(search, 500));
});
function search(force) {
    var existingString = $("#searchString").val();
    if (!force && existingString.length < 3) return; //wasn't enter, not > 2 char
    $.get('/Tracker/Search/' + existingString, function(data) {
        $('div#results').html(data);
        $('#results').show();
    });
}

这样做是通过在keyup元素的{{3}上存储计时器，在keypress之后执行搜索（在500ms上，对于这些情况优于#searchString） }}。每个keyup清除该计时器，如果该密钥已输入，则立即搜索，如果在自动搜索之前没有设置另一个500ms超时。