Question

如果您访问Google.com并在搜索栏中输入一个字母，它似乎会立即将您带到另一个页面。您可以在此期间尽快输入内容，Google不会丢失任何一个字符。

我尝试使用keyup（）事件和setinterval（）来模拟它，但是在加载页面时我仍然会丢失一两个字符。

$(document).ready(function(){
var timer;$("input#q").keyup(
  function(e){
  var str = $("input#q").val();
  if(str.length > 1){
    clearInterval(timer);timer = setTimeout(
      function(){var url = "/search/?q="+encodeURI($("input#q").val());
      location.href = url;}, 210);
   }
});

这是我目前正在使用的代码，它可以正常运行，但在将您转移到下一页时可能会丢失按键/键盘。

有人知道Google是如何做到的或有任何建议吗？

由于

Answer 1

您认为自己被传输到另一个页面，但事实上并非如此。它使用历史堆栈中的pop / push，使用新的（很酷！）HTML5 feature。

页面永远不会重新加载，因此您不会丢失任何字符。

Github在您浏览存储库时也会使用它。

Answer 2

捕获输入实际上是在同一个<input>控件中完成的，只需更改CSS定位即可。没有页面转换，只有JavaScript响应按键，然后相应地操作样式。

在后台触发AJAX事件以执行增量搜索（如果您为Google启用了该选项），如果您使用可以显示网络流量的浏览器（例如Chrome），则可以看到该事件。

Answer 3

根据我在使用google.com时看到的内容，在您离开搜索框之前，他们实际上并未改变栏中的位置。此时它会快速更改页内锚点（在＃之后），这不会触发页面的完全重新加载。

Google如何在页面转换时捕获按键？

3 个答案: