Загрузка результатов пользовательского поиска Google без обновления страницы

Я хотел бы отправить пользовательский поисковый запрос Google без перезагрузки / обновления всей html-страницы. Я использую последнюю версию 2 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>

Скрипт результатов gcs размещается везде, где требуются результаты поиска.

<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>

Любая помощь приветствуется.

Спасибо

ОБНОВЛЕНИЕ

Я реализовал,

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>

Однако выполнение поиска по-прежнему обновляет всю страницу, что приводит к хаосу моего первоначального форматирования html до того, как будут инициированы сценарии jquery.

Спасибо

ОБНОВЛЕНИЕ

Я добавил все разновидности следующего в многочисленных комбинациях, но либо обновляется вся страница, либо вообще ничего не происходит.

<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 для дальнейшей настройки? Сможет ли это как-нибудь решить проблему обновления страницы?

Спасибо


ajax google-custom-search
person ifthatdoesntdoit    schedule 05.04.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

тебе нужно позвонить

customSearchControl.execute (urlParams [queryParamName]);

всякий раз, когда вам нужно искать. поэтому используйте эту функцию в форме onsubmit.

Решая эту проблему, я установил ее на своем собственном сайте. вы можете проверить это здесь.

В основном я просто добавляю обработчик отправки в форму через jquery и выполняю всю работу, которую Google делал внутри обработчика отправки. работает безотказно.

person iamgopal    schedule 05.04.2012
comment
Спасибо за ответ, iamgopal. Будет ли это выполнять запрос и обновлять результаты поиска без перезагрузки страницы? Как мне это сделать, используя jquery .on () для отправки формы? Или есть способ лучше? Спасибо. - person ifthatdoesntdoit; 05.04.2012
comment
добавить return false; отправить. поэтому он не будет перезагружать всю страницу. - person iamgopal; 05.04.2012
comment
Я пробовал описанное выше, и ничто не мешает обновлению страницы. Это убивает мой дизайн. У меня есть скрытая панель, которая исчезает при нажатии или отправке событий формы поиска. Любой из них бесполезен, потому что после обновления страницы все отбрасывается, и jquery / javascript должен запускаться заново. - person ifthatdoesntdoit; 06.04.2012

arrow_upward
0
arrow_downward

Лучший вариант - использовать JQuery для создания хуков. Приведенный ниже код создаст перехватчик между searchButton и searchresults-only, когда отрисовка будет завершена.

Чтобы эта настройка работала, вам необходимо указать gname для вашего элемента, иначе вы не сможете найти его с помощью методов google.cse.element. У меня есть живая версия приведенного ниже кода, но я не обещаю он будет постоянно активен, так как он размещен на моем FTP NDSU.

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);
})();
person Deovandski    schedule 02.03.2016