谷歌自定义搜索提交
Google Custom Search on submit
我想自定义我的搜索表单。我正在使用谷歌搜索服务,并将其链接到我的域名等。
我在控制面板中选择了两列布局,但是,我想对表单做一些onSubmit操作。
所以我试图把一个actionlistener在jQuery的形式,但不工作。
然后我想谷歌肯定提供了一些东西。是的,他们有。它叫做:
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中调用它,所以这对我来说很奇怪。我不知道该怎么做。
我希望有人对谷歌搜索有更多的经验,可以帮助我解决这个问题。
非常感谢。
注意:下面的代码使用了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>
相关文章:
- 如何使用提交按钮搜索表中的记录
- 在网站上提交搜索表单以刮表
- 如何通过JavaScript实现自动提交表单进行搜索
- select2v4用于实时搜索-可以从下拉列表中选择或提交关键字
- 根据ajax搜索答案自动填写表单并提交
- Wordpress:提交后,我如何在搜索表单中保留市场复选框
- 如何自动提交“;搜索“;作用
- 搜索诸如提交完成事件之类的内容以关闭加载程序
- 带有两个提交按钮的多搜索框
- 谷歌网站搜索捕获搜索提交和触发功能
- Wordpress搜索&筛选自动提交
- 以“搜索”按钮为目标的OnPress事件会触发整个页面的“提交”按钮
- 使用GET变量自动提交数据表搜索
- 搜索函数javascript提交
- 禁用辅助提交按钮,直到完成新搜索
- 提交搜索表单,但也有查询字符串在PHP(和JS)
- 用户通过表单提交关键字;我怎样才能得到'关键词'搜索URL的一部分,以便在页面中进行修改
- 搜索表单:当一个名字被点击时提交
- 在选择框发生变化时,重新搜索提交表单
- 添加提交按钮到jquery搜索表单