加载谷歌自定义搜索不刷新页面
问题描述:
结果我想提交一个谷歌定制搜索查询,而无需重新加载/刷新整个HTML页面。我正在使用最新的v2 gcs和“仅结果”版式。加载谷歌自定义搜索不刷新页面
载入GCS API,搜索表单上面的任何地方
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script>
google.load('search', '1',
{language : 'en', style : google.loader.themes.V2_DEFAULT});
</script>
我的自定义搜索表单
<form onsubmit="return executeQuery();" id="cse-search-box-form-id">
<input type="text" name="q" id="cse-search-input-box-id" size="25" autocomplete="off"/>
<input type="submit" id="site-search-submit" value="search"/>
</form>
地方选区结果脚本放在任何搜索结果中想
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var customSearchControl = new google.search.CustomSearchControl(
'UNIQUE-API-KEY', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
options.enableSearchResultsOnly();
customSearchControl.draw('cse', options);
function parseParamsFromUrl() {
var params = {};
var parts = window.location.search.substr(1).split('\x26');
for (var i = 0; i < parts.length; i++) {
var keyValuePair = parts[i].split('=');
var key = decodeURIComponent(keyValuePair[0]);
params[key] = keyValuePair[1] ?
decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
keyValuePair[1];
}
return params;
}
var urlParams = parseParamsFromUrl();
var queryParamName = "q";
if (urlParams[queryParamName]) {
customSearchControl.execute(urlParams[queryParamName]);
}
}, true);
</script>
任何帮助表示赞赏。
谢谢
UPDATE
我已经实现,
customSearchControl.execute(urlParams[queryParamName]);
,现在我的搜索形式如下:
<form onsubmit="customSearchControl.execute(urlParams[queryParamName]);" id="cse-search-box-form-id">
<input type="text" name="q" id="cse-search-input-box-id" size="25" autocomplete="off"/>
<input type="submit" id="site-search-submit" value="search"/>
</form>
然而,执行搜索仍刷新整个页面,哪个在jQuery脚本启动之前引发我的初始html格式混乱。
感谢
UPDATE
我已经添加了所有品种以下的多种组合,但无论是整个页面刷新或没有任何反应都没有。
<form onsubmit="return executeQuery(); return false;" id="cse-search-box-form-id">
<form onsubmit="executeQuery(); return false;" id="cse-search-box-form-id">
<form onsubmit="return false; executeQuery();" id="cse-search-box-form-id">
<form onsubmit="return false; return executeQuery();" id="cse-search-box-form-id">
<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); return false;" id="cse-search-box-form-id">
<form onsubmit="return executeQuery(); event.preventDefault();" id="cse-search-box-form-id">
<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); event.preventDefault();" id="cse-search-box-form-id">
<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); event.stopPropagation();" id="cse-search-box-form-id">
等等...
任何人有这方面的经验?如何进一步定制json api?这会解决页面刷新问题吗?
谢谢
答
需要调用
customSearchControl.execute(urlParams [queryParamName]);
每当你需要搜索。所以在表单上提交时使用该函数。
,而解决这个问题,我已经安装了它在我自己的网站。你可以check it out here。
基本上,我只补充提交处理通过jQuery形成和所做的一切,谷歌提交处理程序中所做的工作。作品完美无瑕。
答
最好的办法是使用jQuery创建挂钩。下面的下面的代码将创建搜寻]和SearchResult所只之间的钩完成时渲染。
为了使此设置生效,您需要为元素指定gname,否则您将无法通过google.cse.element方法找到它。我有一个live version下面的代码,但我没有承诺,因为它是在我的NDSU FTP中托管,所以永远不会生效。
的Index.html
<!DOCTYPE html>
<html>
<head>
<title>Google Search Customization</title>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<h1>Trigger an Element API v2 search through a custom textbox</h1>
<label>Enter Search Query:</label><input id="customSearchText" type="text">
<input id="customSearch" type="submit">
<div style="width: 50%; float: right;">
<gcse:searchresults-only gname="searchOnlyCSE"></gcse:searchresults-only>
</div>
</body>
</html>
index.js
//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0".
window.__gcse = {
callback: googleCSELoaded
};
function googleCSELoaded() {
// The hook in question.
$("#customSearch").click(function() {
var searchText = $("#customSearchText").val();
console.log(searchText);
var element = google.search.cse.element.getElement('searchOnlyCSE');
element.execute(searchText);
})
}
// CSE Code. This is a free version, so please don't make too many requests.
(function() {
var cx = '001386805071419863133:cb1vfab8b4y';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
谢谢你的回应,iamgopal。这是否会执行查询并更新搜索结果而不重新加载页面?我如何使用jquery .on()来完成表单提交?或者,还有更好的方法?谢谢。 – ifthatdoesntdoit 2012-04-05 02:30:11
add return false;以提交。所以它不会重新加载整个页面。 – iamgopal 2012-04-05 05:25:41
我已经尝试了以上,没有什么是停止刷新页面。这是杀了我的设计。我有一个隐藏的面板,可以在搜索表单的点击或提交事件中淡入。任何一个都是无用的,因为一旦页面刷新一切都会被丢弃,并且jquery/javascript必须重新开始。 – ifthatdoesntdoit 2012-04-06 01:43:21