jquery - 使用 Ajax 和按键优化搜索

Question

我有以下代码，当用户在文本框中键入内容时，我想用它来搜索数据库。下面的代码工作正常，但似乎效率有点低，就好像用户打字速度非常快一样。我可能会进行比必要的更多的搜索。因此，如果用户输入“sailing”，我就会搜索“sail”、“saili”、“sailin”和“sailing”。

我想看看是否有一种方法可以检测按键之间的任何特定时间，因此仅在用户停止输入 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();
    });
}

它的作用是在 500ms 后通过在#searchString 元素的 .data() collection 。每次keyup都会清除该计时器，如果输入了该键，则立即搜索，如果没有在自动搜索之前设置另一个500ms超时。