使用 Ajax 和按键优化搜索答案

【问题标题】：Optimised search using Ajax and keypress使用 Ajax 和按键优化搜索
【发布时间】：2011-03-03 00:06:38
【问题描述】：

当用户在文本框中键入内容时，我想使用以下代码搜索数据库。下面的代码运行良好，但似乎效率有点低，好像用户输入速度非常快。我可能会进行比必要更多的搜索。因此，如果用户输入“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();
            });
        }
    }

【问题讨论】：

标签： jquery ajax search keypress

【解决方案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 上，在这些情况下优于keypress）。每个keyup 都会清除该计时器，如果输入了密钥，则立即搜索，如果没有在自动搜索之前设置另一个500ms 超时。

【讨论】：

如果有人在使用此代码时遇到问题，请查看：stackoverflow.com/a/1171758/849829
打字和搜索对我有用，但是当我按下回车键时它会重新加载页面。为什么会这样？
@JoabR2D2 也许你有一个<form> 标签/你的<input type='text'> 的父级
@JohnChristianDeChavez 是的，它就在那里，但我必须保留表单，我正在使用 prevenDefault() 来解决它。
@JoabR2D2 然后你的e.preventDefault() 不起作用，因为它重定向到你的表单操作尝试return false 可能。或者如果不是真的需要，最好不要使用<form> 标签。

【解决方案2】：

查看这个老问题：

How do I make my live jQuery search wait a second before performing the search?

【讨论】：

【解决方案3】：

我会做的是每次按键都使用具有所需延迟的 setTimeout 函数。因此该函数将在超时后触发。每次按键然后删除计时器并设置一个新的计时器，用 clearTimeout();

查看这里的一些示例，滚动浏览所有广告。

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

【讨论】：

【解决方案4】：

我只是想为这个问题补充一些观点。节流和去抖动概念与此主题相关。

节流： 它会让你在指定的时间间隔内执行函数。

去抖： 当用户停止输入时，它将使您执行该功能。

你可以通过 setimeout ， cleartimeout 函数来实现这两个。查看这个链接会给你一个清晰的演练。

LINK

【讨论】：

直接在 SO 上描述您的解决方案。