Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Search API Sample</title>
    <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
    <script type="text/javascript">

    google.load('search', '1');

    function OnLoad() {

      // create a tabbed mode search control
      var tabbed = new google.search.SearchControl();

      // create our searchers.  There will now be 3 tabs.
      tabbed.addSearcher(new google.search.WebSearch());

      // draw in tabbed layout mode
      var drawOptions = new google.search.DrawOptions();
      drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);

      // Draw the tabbed view in the content div
      tabbed.draw(document.getElementById("content"), drawOptions);

    }
    google.setOnLoadCallback(OnLoad);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="content">Loading...</div>
  </body>
</html>

您好，

如果您复制粘贴上面的代码，您将看到谷歌基本搜索 code playground

不是点击搜索按钮或输入（提交）来提供结果，而是希望表单在keyup中提交，这样就像即时搜索一样。我尝试查看文件并在各个角度使用firebug进行探索，但我无法使其工作。我希望有人能指出我正确的方向。

Answer 1

它有点像黑客，但你可以添加这样的东西：

1. var inputBox = document.forms[0].search;
2. inputBox.onkeyup = function(){tabbed.execute(inputBox.value);}

创建对输入框的引用。在code playground示例中，它是 forms[0] 页面上的第一个表单，输入框的名称是 search （ name="search" 的）。
将添加一个将在输入框中运行onkeyup的函数。该函数将执行搜索（ tabbed.execute ）从输入框传递值（ inputBox.value ）。

当用户按下某个键时，它将导致搜索运行。然而正如Geoff Adams所述，在每次按键上进行搜索都是不好的做法。如果用户连接速度较慢，则会浪费带宽，您也可能会发现它违反了Google的TOS以执行大量搜索。

你可以通过做这样的事情来改善体验：

  1. var wait = 0;
  2. var inputBox = document.forms[0].search;
  3. inputBox.onkeyup = function(){
  4.   clearTimeout (wait);
  5.   wait = setTimeout(function(){
  6.     tabbed.execute(inputBox.value);
  7.   },1000);
  8. }

创建一个将执行搜索的持有者。
链接到输入框。
添加一个运行onkeyup的函数。
清除可能等待发生的任何搜索。
创建超时，向其传递一个在超时发生时运行的函数。
设置要在输入框中的文本上传递的搜索功能。
设置超时1秒（1000毫秒）
完成

现在你仍然可以搜索onkeyup，但是如果用户继续输入，它将忘记最后一次搜索，所以在1秒没有输入后，搜索将被执行。

尝试将代码添加到code playground之后：

// Search! tabbed.execute("Subaru STI");

点击运行代码。

注意：我没有在Chrome以外的任何地方测试过，IE8甚至不会为我加载Code Playground !!!

典型的IE .......

好的尝试一下：

而不是：

var inputBox = document.forms[0].search;

将其更改为：

var inputBox = document.getElementsByName("search")[0];

因此，您实际上不是尝试使用表单访问，而是搜索名称为search的所有元素，这将是一个数组，因此假设只有一个search输入，那么您要访问的第一个（ [0] ）。

var wait = 0;
var inputBox = document.getElementsByName("search")[0];
inputBox.onkeyup = function(){
  clearTimeout (wait);
  wait = setTimeout(function(){
    tabbed.execute(inputBox.value);
  },1000);
}

好的，所以我终于快速了解了Googles Doc's for the SearchForm。

看起来Google提供了对输入框的DOM访问权限，而不是依靠javascript引擎来查找它，在这种情况下tabbed.input非常简单，因为tabbed是搜索对象。尝试一下（我将保留以上所有内容，对其他人有用）

  var wait = 0;
  var inputBox = tabbed.input;
  inputBox.onkeyup = function(){
    clearTimeout (wait);
    wait = setTimeout(function(){
      tabbed.execute(inputBox.value);
    },1000);
  }

Answer 2

你的'模拟'有点不同，因为它实际上有一个输入字段（物理html）。在谷歌代码中没有物理html输入。所有，是div id =“content”这可能是IE8的问题。这是我唯一可以想象的东西。奇怪的是，如果我从firebug（或任何工具，在div内容之间）复制所有物理html我似乎无法修改任何东西......顺便说一句迄今为止的代码在chrome中有效。我正在使用IE 8.0.6001。这是错误消息：'undefined'为null或者不是对象index.html，第29行字符1，女巫是：inputBox.onkeyup = function（）{

（哦，不知怎的，我无法发表评论......）

使用密钥进行即时搜索

2 个答案: