提交时的 Google 自定义搜索答案

【问题标题】：Google Custom Search on submit提交时的 Google 自定义搜索
【发布时间】：2011-08-16 05:59:47
【问题描述】：

我想自定义我的搜索表单。我正在使用 Google 搜索服务并将其链接到我的域等。

我在控制面板中选择了两列布局，但是，我想在表单的提交上做一些事情。

所以我尝试将 jQuery 中的 actionlistener 放入表单中，但是不起作用。

然后我认为谷歌肯定为此提供了一些东西。是的，他们做到了。它被称为：

setOnSubmitCallback()

http://code.google.com/apis/websearch/docs/reference.html

不幸的是，我不明白。

到目前为止，我有：

google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});

                    function initialize()
                    {
                        var searchControl = new google.search.CustomSearchControl('017998360718714977594:j6sbtr-d6x8');
                        searchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

                        var options = new google.search.DrawOptions();
                        options.setSearchFormRoot('cse-search-form');

                        searchControl.draw('cse', options);
                    }

                    google.setOnLoadCallback(initialize);

所以我有两个 div： #cse-search-form 用于表单，#cse 用于结果

#cse 在另一个 div #searchResults 中，它是隐藏的，它来了：

我想在 jQuery UI 的对话框中打开 #searchResults。

$("#searchResults").dialog( { minWidth: 750, minHeight: 750 } );

这将导致：

.setOnSubmitCallback(function() {
    $("#searchResults").dialog( { minWidth: 750, minHeight: 750 } );
} );

所以我现在的问题是，我必须将 setOnSubmitCallback 放在哪里以及放在什么位置？

我不能把它放在 google.search.Search 或 CustomSearchControl 上，正如文档中所述。而且我不能在 onLoadCallback 中调用它，所以这对我来说很奇怪。不知道该怎么做。

我希望有人对谷歌搜索有更多的经验，可以帮助我解决问题。

非常感谢您。

【问题讨论】：

标签： javascript search

【解决方案1】：

注意：以下代码使用的是 Google 已弃用的内容。改用这个：http://code.google.com/apis/customsearch/v1/overview.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Hello World - Google  Web Search API Sample</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    //<![CDATA[
    google.load('search', '1');
    google.load("jquery", "1.5.2");
    google.load("jqueryui", "1.8.12");

    function OnLoad() {

        var searchComplete = function(searchControl, searcher){
            $('#searchResults').dialog({modal: true, width: 700, height: 400, position: [50, 50]});
            for (result in searcher.results) {
                var content = searcher.results[result].content;
                var title = searcher.results[result].title;
                var url = searcher.results[result].url;
                $('#searchResults ul')
                    .append($('<li></li>')
                        .append($('<a/>').attr('href', url).text(title))
                        .append($('<p/>').text(content)));
            }
        };

        // called on form submit
        newSearch = function(form) {
          if (form.input.value) {
            // Create a search control
            var searchControl = new google.search.SearchControl();

            // Add in a set of searchers
            searchControl.addSearcher(new google.search.WebSearch());
            searchControl.addSearcher(new google.search.VideoSearch());

            // tell the searchControl to draw itself (without this, the searchComplete won't get called - I'm not sure why)
            searchControl.draw();

            searchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);           
            searchControl.setSearchCompleteCallback(this, searchComplete);
            searchControl.execute(form.input.value);
          }
          return false;
        }

        // create a search form without a clear button
        // bind form submission to my custom code
        var container = document.getElementById("searchFormContainer");
        this.searchForm = new google.search.SearchForm(false, container);
        this.searchForm.setOnSubmitCallback(this, newSearch);
    }
    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>
  </head>
  <body>
    <div id="searchFormContainer">Loading</div>
    <div id="searchResults" title="Search Results">
        <ul></ul>
    </div>
  </body>
</html>

【讨论】：

好的 - 这会引导我找到这个代码：pastebin.com/0eMBHzTh 我可以搜索，它会显示我的提交对话框。但是，它不会显示结果。
好的，我创建了一个完整的示例。有点绕，谢谢你帮我不偷懒弄明白了。
WoW Milimetric，这真是太棒了！我没想到有人会写那个。代码很好，我明白。但是 - 因为总是有一个但是 - 这只是一个谷歌搜索 - 而不是在我的网站上搜索。它没有与谷歌搜索帐户相关联。这是我的主要问题。我现在要睡觉了，但我会在今天晚些时候看看它，也许可以编辑你的脚本，将它连接到我的谷歌帐户，以便它使用我的网站进行搜索的搜索引擎。再次感谢！我非常感谢。
我认为答案只是添加另一个搜索器。所以现在它通过添加new google.search.WebSearch() 和new google.search.VideoSearch() 和searchControl.addSearcher 来搜索视频和网络。因此，要在您的网站上进行搜索，我认为只需在您引用 google.com/jsapi 时添加您的 ?key=YOUR-KEY，然后添加正确的搜索器（不知道那是什么）。嘿，顺便说一句，我很愚蠢，但我刚刚意识到这已被弃用。你应该使用：code.google.com/apis/customsearch/v1/overview.htmlsearchControl.addSearcher();
var searchControl = new google.search.CustomSearchControl('017998360718714977594:j6sbtr-d6x8'); // Add in a set of searchers var webSearch = new google.search.WebSearch(); webSearch.setSiteRestriction("http://www.wimbledon-it.co.uk"); searchControl.addSearcher(webSearch); 现在应该成功了！