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

使用 DHTML、Google 搜索 API 和 AJAX 进行实验

SamNazarko
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.25/5 (3投票s)

2009年5月5日

公共领域

3分钟阅读

viewsIcon

33832

了解如何使用纯 xHTML 和 JavaScript 通过 AJAX 创建具有各种搜索结果的水平选项卡。

引言

Google 每天都变得越来越活跃，并且参与到高质量可用源代码的开发中。他们还公开了他们的 API，允许其他网站管理员将 Google 功能整合到他们自己的网页中。在本文结束时，您将创建一个具有表格布局的 Google 搜索，提供各种类别的结果（见下文）。如果您希望深入参与 Google 的服务，您应该获得一个 API 密钥。要了解为什么这很有用并注册一个密钥，请参阅此处的页面。您需要一个 API 密钥才能获得此项目的结果。

背景

此处的代码基于 Ken Egozi 在 2007 年创建的项目。您应该阅读他的项目，了解正在发生的事情。我已经将 API 代码更新为 Google 推荐的新标准，这使我能够探索此处演示的 API 的新功能。这个项目的优点在于它完全用 XHTML 和 JavaScript 编写，这意味着它不依赖于任何服务器端代码。

代码

请欣赏这个带有完整注释的脚本，它以表格方式添加了网页、图像、视频、新闻、网站和本地搜索。

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

<script type="text/javascript">
var searchControl;
window.onload = function() {
    onLoad();
}
function onLoad() {
    // Create a search control
    // Bold text signifies a variable that is changeable.
    searchControl = new google.search.SearchControl();
   
    // Let's get lots of results
    // This can be .SMALL_RESULSET for 4 results per page
    // or .LARGE_RESULTSET FOR 8 results per page.
    searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);

    // Open in a new window (you can use SELF, PARENT, TOP or BLANK targets)
    searchControl.setLinkTarget(google.search.Search.LINK_TARGET_PARENT);

    // add a regular web search
    var webSearch = new google.search.WebSearch();
    webSearch.setUserDefinedLabel("Web");
    searchControl.addSearcher(webSearch);

    // add an image search
    var imageSearch = new google.search.ImageSearch();
    imageSearch.setUserDefinedLabel("Images")
    searchControl.addSearcher(imageSearch);

    // add a local search
    var LocalSearch = new google.search.LocalSearch();
    LocalSearch.setUserDefinedLabel("Locations")
    searchControl.addSearcher(LocalSearch);

    // change this to a desired location
    // (zip/post code, address, city or even country)
    LocalSearch.setCenterPoint("London, UK");

    // add a video search
    var VidSearch = new google.search.VideoSearch();
    VidSearch.setUserDefinedLabel("Video");
    searchControl.addSearcher(VidSearch);

    // add a news search
    // seems to only get US results.
    var newsSearch = new google.search.NewsSearch();
    newsSearch.setUserDefinedLabel("News");
    searchControl.addSearcher(newsSearch);

    // add a wikipedia search
    var siteSearch = new google.search.WebSearch();

    // here we use Wikipedia as an example
    // of a site to retreive results from. 
    siteSearch.setUserDefinedLabel("Wikipedia");
    siteSearch.setSiteRestriction("wikipedia.org");
    searchControl.addSearcher(siteSearch);

    // 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"));
}

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();
}
</script>

<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>
</head>
<body>
<div id="queryContainer">
<input type="text" name="query" id="query" /><br/>
<div id="branding"></div>
</div>
<div id="searchcontrol"></div>

潜在问题

您可能已经注意到，无论用户在页面上键入什么内容，焦点都会自动集中在搜索的输入字段上。虽然这非常用户友好，但它产生了一个主要问题。一些选项卡使用自己的选项字段（例如，本地搜索），允许用户指定他们的区域。这里的问题是，如果用户尝试填写该框，文本将出现在搜索输入字段中。这可以通过删除以下代码来解决

if (query == null)
    qquery = document.getElementById('query');
    // and move the focus in there
    query.focus();
}

这样您就只剩下

var query = null;
document.onkeydown = function(event) { kd(event); };
function kd(e) {
    if (!e) e = event;
    if (e.keyCode == 27)
        searchControl.clearAllResults();
}

这将消除自动聚焦在搜索输入字段上的能力。但是，我默认没有删除它，因为这种冲突可能不会发生，具体取决于您选择使用的 Google 功能。

您完成了...

现在，使用您添加的 Google 搜索 API 的所有不同功能，它应该可以像魅力一样工作。 随意对其进行调整和修改，但是如果您做了您认为值得告诉我们的事情，请务必这样做。

更多信息

AJAX 变得越来越流行，并且是新 Web 2.0 的基础。今天演示的技术正在不断发展，而您刚刚目睹了冰山一角。有关 Google 搜索 API 以及其他 API 的更多信息，请访问 Google 网站上的此处。您甚至可以想将博客搜索添加到选项卡中，这很容易找到。

感谢您的阅读

感谢您阅读关于 AJAX 和 Google 搜索 API 的内容。我还要感谢 Ken Egozi 的项目，该项目非常有帮助。如果您有任何疑问或想法，请随时留言。

© . All rights reserved.