65.9K
CodeProject 正在变化。 阅读更多。
Home

一个使用 Google AJAX Search API 和一些 DHTML 的简洁搜索页面

Ken Egozi
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.64/5 (12投票s)

2007年1月24日

2分钟阅读

viewsIcon

133923

downloadIcon

1242

一篇关于使用 Google APIs 创建一个简洁的 Ajax 驱动搜索页面的文章

CoolNSimpleGoogleAJAX/cool-n-simple-google-ajax-search.gif

引言

在本文中，我将演示如何使用一个 `public` API，以非常简单的方式创建一个使用一些高级技术（如快速异步 Web 搜索）的可用网页。 您可以在我的个人网站上看到它的实际效果：http://www.kenegozi.com。

背景

我创建这个页面的原因是我想拥有

  1. 一个以 Google 作为引擎的面向搜索的主页
  2. 能够搜索和重新搜索，而无需将光标指向搜索字段，也不需要使用大量的 Tab 键
  3. 一种搜索我的博客的简单方法
  4. 一个酷炫的个人网站根目录

Using the Code

步骤 1：初始化

我们要做的第一件事是创建一个最小的网页标记

<!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>My Cool'n'Simple Search Page</title>
</head>
<body>
    <h1>My Cool'n'Simple Search Page</h1>
</body>
</html>

步骤 2：腾出空间

现在，我们将添加一个搜索字段，并为搜索结果腾出空间

<div id="queryContainer">
    <input type="text" name="query" id="query" />
</div>
<div id="searchcontrol"></div><br />
<div id="branding">Powered by Google</div>

查询输入字段被包装在一个 `div` 中，以便进行样式设置。

步骤 3：稍微美化一下

我们将添加一些 CSS 规则，以使我们的页面看起来更漂亮一些。 我们希望有一个可读的字体，输入查询和结果之间有一些空间，一个干净的输入外观，并使其全部居中在页面中。

<style type="text/css">
body
{
    font-family: verdana;
    text-align: center;
}
#queryContainer
{
    margin-bottom:2em;
    width: 80%;
    margin-left:auto;
    margin-right:auto;
}
#query
{
    border:1px solid silver;
    width: 100%;
}
#searchcontrol
{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}
.gsc-control 
{ 
    width: 100%; 
}
</style>

我们还将 `gsc-control` 类设置为最大宽度。 当前版本的 Google AJAX Search 在一个 `html` 元素中创建结果，其 `width=300px`。 我们希望它占据其容器的整个宽度，因此我们覆盖 Google 的默认设置。

步骤 4：应用 Google 的魔法

此步骤是在 Google AJAX Search API 文档的帮助下组装的，网址为 http://code.google.com/apis/ajaxsearch/documentation/。

因此，我们将下一个声明添加到页面的 `<head>` 部分

<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" 
      rel="stylesheet" />
<script type="text/javascript" 
   src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR_KEY">
</script>

请注意，“`YOUR_KEY`”应替换为您可以在 http://code.google.com/apis/ajaxsearch/signup.html 获得的密钥。

现在，我们将下一个 JavaScript 代码添加到 `<head>` 部分

var searchControl window.onload = function() {
    onLoad();
}
function onLoad() {
    // Create a search control
    searchControl = new GSearchControl();

    // add a regular web search, with a custom label 'web'
    var webSrearch = new GwebSearch();
    webSrearch.setUserDefinedLabel("web");
    searchControl.addSearcher(webSrearch);

    // add a site-limited web search, with a custom label
    var siteSearch = new GwebSearch();
    siteSearch.setUserDefinedLabel("KenEgozi.com");
    siteSearch.setSiteRestriction("kenegozi.com");
    searchControl.addSearcher(siteSearch);
                
    // add a blog search, with a custom label
    var blogsSrearch = new GblogSearch();
    blogsSrearch.setUserDefinedLabel("weblogs");
    searchControl.addSearcher(blogsSrearch);

    // setting the draw mode for the Google search
    var drawOptions = new GdrawOptions();
    // use tabbed view
    drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
    // set the input field (instead of the default one)
    drawOptions.setInput(document.getElementById('query'));
    // actually write the needed markup to the page
    searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
    // set the google logo container
    GSearch.getBranding(document.getElementById("branding"));
}

我们几乎完成了！

步骤 5：添加一点 DHTML 魔力

现在，我们将添加在页面上的任何位置键入并更新搜索字段的功能。 我们将通过将此简单的 JavaScript 添加到上一个块来实现这一点

var query = null;
document.onkeydown = function(event) { kd(event); };
function kd(e) {
    // make it work on FF and IE
    if (!e) e = event;
    // use ESC to clear the search results
    if (e.keyCode == 27)
        searchControl.clearAllResults();
    // get the input field
    if (query == null)
        query = document.getElementById('query');
    // and move the focus in there
    query.focus();
}

就是这样！

关注点

  1. 您必须从 Google 获取您自己的密钥，网址为 http://code.google.com/apis/ajaxsearch/documentation/
  2. 建议您访问 Google 的 API 站点，并学习使用他们的 `public` API。 它是免费、有趣且有用的。 还有许多其他公司提供免费的 Web 服务和 API。 因此，您可以得到他们的帮助，并专注于您自己的业务逻辑，而无需为常见场景“重新发明轮子”。

玩得开心！

许可证

本文未附加明确的许可证，但可能在文章文本或下载文件本身中包含使用条款。如有疑问，请通过下面的讨论区联系作者。
作者可能使用的许可证列表可以在此处找到。

© . All rights reserved.