我想自定义我的搜索表单.我正在使用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中调用它,所以对我来说这很奇怪. Cannt想出如何做到这一点.
非常感谢你提前.
解决方法
注意：以下代码使用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>
