Como carregar os resultados da Pesquisa personalizada do Google sem atualizar a página
Gostaria de enviar uma consulta de pesquisa personalizada do Google sem recarregar / atualizar toda a página html. Estou usando os gps v2 mais recentes com o layout "Somente Resultados".
Carregando a API do gcs, em qualquer lugar acima do formulário de pesquisa
<code><script src="//www.google.com/jsapi" type="text/javascript"></script> <script> google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT}); </script> </code>
Meu formulário de pesquisa personalizada
<code><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> </code>
O script de resultados do gcs colocado onde quer que os resultados da pesquisa sejam desejados
<code><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> </code>
Qualquer ajuda é apreciada.
Obrigado
ATUALIZAR
Eu implementei,
<code>customSearchControl.execute(urlParams[queryParamName]); </code>
e agora meu formulário de pesquisa é o seguinte:
<code><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> </code>
No entanto, a realização de uma pesquisa ainda atualiza a página inteira, o que lança minha formatação inicial em HTML no caos antes que os scripts de jquery sejam iniciados.
obrigado
ATUALIZAR
Eu adicionei todas as variedades do seguinte em várias combinações, mas a página inteira é atualizada ou nada acontece.
<code><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"> </code>
e assim por diante...
Alguém tem experiência com isto: E quanto ao json api para mais personalização? Isso resolveria o problema da atualização da página de alguma forma?
Obrigado