Дополнительные примеры обратного вызова элемента поиска

На этой странице представлено множество примеров использования обратных вызовов элемента поиска. Они дополняют примеры, приведенные в разделе «Обратные вызовы» документа API элемента пользовательского поиска.

Примеры запуска обратного вызова поиска

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

Следующий обратный вызов , запускающий поиск , украшает каждый запрос текущим днем ​​недели.

Пример обратного вызова при запуске поиска 
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const mySearchStartingCallback = (gname, query) => {
  const dayOfWeek = new Date().getDay();
  console.log(dayOfWeek);
  var days = {
        "0": "Sunday",
        "1": "Monday",
        "2": "Tuesday",
        "3": "Wednesday",
        "4": "Thursday",
        "5": "Friday",
        "6": "Saturday"
    };

    return query + ' ' + days[dayOfWeek];
};
// Install the callback.
window.__gcse || (window.__gcse = {});
  window.__gcse.searchCallbacks = {
    image: {
      starting: mySearchStartingCallback,
    },
    web: {
      starting: mySearchStartingCallback,
    },
};

Включите эти элементы в HTML: 

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Результаты. Примеры обратного вызова

Обратный вызов, отображаемый в результате, удобен для изменения страницы после ее заполнения результатами. Он разработан, чтобы упростить изменение отображения результатов, не требуя от обратного вызова брать на себя полную ответственность за отображение результатов.

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

Определить страницу последних результатов

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

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
    var searchresults= document.getElementsByClassName("gsc-cursor-page");
    var index= document.getElementsByClassName("gsc-cursor-current-page");
    if(index.item(0).innerHTML == searchresults.length){
       alert("This is the last results page");
    }
};

Установить обратный вызов

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

Включите эти элементы в HTML: 

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Увеличение размера шрифта «курсорных» ссылок

Демо-версия обратного вызова , отображаемая в результате, увеличивает размер шрифта цифр «курсора», которые выбирают страницы результатов.

Размер шрифта по умолчанию — 12 пикселей. Здесь мы увеличиваем его до 20 пикселей. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
   document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};

Установить обратный вызов

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

Включите эти элементы в HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Используйте буквы для меток «курсора»

В результате полученный обратный вызов меняет ссылки на страницы в «курсоре» с цифр на буквы. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
    var arr = document.getElementsByClassName('gsc-cursor-page');
    var alp = ['A','B','C','D','E','F','G','H','I','J','K','L',
      'M','N','O','p','Q','R','S','T','U','V','W','X','Y','Z'];
    for (var i = 0; i < arr.length; i++) {
        arr[i].innerHTML = alp[i];
    }
};

Установить обратный вызов

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

Включите эти элементы в HTML: 

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Примеры обратного вызова готовых результатов

Отображение результатов с фоном чередующихся цветов

Этот обратный вызов форматирует результаты с чередованием светлого и темного фона.

<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

Примечание. Этот код написан на JavaScript/ES6. Он будет работать в большинстве браузеров, но для Internet Explorer и некоторых других старых браузеров его необходимо будет преобразовать в JavaScript/ES5.

barredResultsRenderedCallback = function(gname, query, promoElts, resultElts){
  const colors = ['Gainsboro', 'FloralWhite'];
  let colorSelector = 0;
  for (const result of resultElts) {
    result.style.backgroundColor = colors[colorSelector];
    colorSelector = (colorSelector + 1) % colors.length;
  }
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: barredResultsRenderedCallback,
  },
};

Включите эти элементы в HTML: 

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Облако слов

Очевидным применением обратного вызова готовности результатов является отображение результатов поиска в формате, который было бы трудно достичь с помощью обратного вызова , отображаемого для результатов , для настройки HTML. Обратный вызов готовности результатов начинается с пустого div . В одном из примеров в документе Search Element API показано, как использовать обратный вызов для отображения очень простой версии результатов. В другом примере показано, как хранить данные результатов из обратного вызова готовности результатов и передавать их в обратный вызов обработки результатов , где их можно использовать для украшения стандартного отображения результатов.

Следующий обратный вызов готовности результатов показывает, что результаты поиска не обязательно должны быть списком результатов. Он заменяет обычное отображение результатов поиска облаком слов, найденных в заголовках и содержании результатов. Если список результатов является для вашего пользователя лишь промежуточным шагом, такой обратный вызов может обойти этот этап и использовать результаты для представления отчета, который хочет пользователь.

Создайте облако слов из содержимого результатов поиска 
<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<style>
  #container {
    width: 100%;
    height: 4.5in;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>

Примечание. Этот код написан на JavaScript/ES6. Он будет работать в большинстве браузеров, но его необходимо будет преобразовать в JavaScript/ES5 для Internet Explorer и некоторых других старых браузеров.

const resultsReadyWordCloudCallback = function(
        name, q, promos, results, resultsDiv) {
    const stopWords = new Set()
      .add('a')
      .add('A')
      .add('an')
      .add('An')
      .add('and')
      .add('And')
      .add('the')
      .add('The');

    const words = {};
    const splitter = /["“”,\?\s\.\[\]\{\};:\-\(\)\/!@#\$%\^&*=\+\*]+/;
    if (results) {
        for (const {contentNoFormatting, titleNoFormatting} of results) {
            const wordArray = (contentNoFormatting + ' ' + titleNoFormatting)
              .split(splitter)
              .map(w => w.toLowerCase());
            for (const w of wordArray) {
                if (w && !stopWords.has(w)) {
                    words[w] = (words[w] + 1) || 1;
                }
            }
        }
    }
    const dataForChart = [];
    for (const key in words) {
        const val = words[key];
        dataForChart.push({
            'x': key,
            'value': val,
        });
    }

    const container = document.createElement('div');
    resultsDiv.appendChild(container);
    container.id = 'container';
    // create a tag (word) cloud chart
    const chart = anychart.tagCloud(dataForChart);
    // set a chart title
    chart.title(`Words for query: "${q}"`)
    // set an array of angles at which the words will be laid out
    chart.angles([0, 45, 90, 135])
    // display the word cloud chart
    chart.container(container);
    chart.draw();
    return true; // Don't display normal search results.
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
    web: {
        ready: resultsReadyWordCloudCallback,
    },
};

Включите эти элементы в HTML: 

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Пример обратного вызова из двух частей

Обратные вызовы готовых результатов и обработанных результатов можно использовать в сочетании для передачи информации от первого ко второму. Например, информация в массиве объектов результатов доступна для обратного вызова готовности результатов , но не для обратного вызова обработки результатов . Сохраняя эту информацию в массиве как часть обратного вызова готовности результатов, мы можем сделать ее доступной для обратного вызова , отображаемого для результатов .

Одним из примеров этого является обход панели предварительного просмотра, отображаемой при нажатии на результат изображения. С помощью обратного вызова, состоящего из двух частей, мы можем получить ссылку на результаты изображения непосредственно на соответствующие веб-сайты, а не отображать предварительный просмотр изображения при нажатии.

Обход предварительного просмотра изображений 
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const makeTwoPartCallback = () => {
  let urls;
  const readyCallback = (name, q, promos, results, resultsDiv) => {
    urls = [];
    for (const result of results) {
      urls.push(result['contextUrl']);
    }
  };
  const renderedCallback = (name, q, promos, results) => {
    const removeEventListeners = element => {
      const clone = element.cloneNode(true);
      element.parentNode.replaceChild(clone, element);
      return clone;
    };
    for (let i = 0; i < results.length; ++i) {
      const element = removeEventListeners(results[i]);
      element.addEventListener('click', () => window.location.href = urls[i]);
    }
  };
  return {readyCallback, renderedCallback};
};
const {
  readyCallback: imageResultsReadyCallback,
  renderedCallback: imageResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  image: {
    ready: imageResultsReadyCallback,
    rendered: imageResultsRenderedCallback,
  },
};

Включите эти элементы в HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>