使用Ajax和keypress优化搜索

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,优于keypress这些情况).每次清除该计时器,如果键输入,立即搜索,如果没有在自动搜索之前设置另一个超时.500ms#searchString.data()keyup500ms