Ví dụ khác về lệnh gọi lại phần tử tìm kiếm

Trang này có một loạt các ví dụ về cách sử dụng lệnh gọi lại Phần tử tìm kiếm. Chúng bổ sung các ví dụ có trong mục Lệnh gọi lại của thẻ Custom Tài liệu về Search Element API.

Ví dụ về lệnh gọi lại bắt đầu tìm kiếm

Lệnh gọi lại bắt đầu tìm kiếm có thể sửa đổi cụm từ tìm kiếm trước khi dùng để tìm kiếm. Công cụ tìm kiếm có thể lập trình có thể được định cấu hình để đưa các cụm từ được xác định trước vào truy vấn, nhưng lệnh gọi lại này có thể sửa đổi truy vấn dựa trên bất kỳ thông tin nào có sẵn cho lệnh gọi lại .

Lệnh gọi lại bắt đầu tìm kiếm sau đây trang trí mỗi truy vấn bằng ngày hiện tại trong tuần.

Ví dụ về lệnh gọi lại bắt đầu tìm kiếm 
<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,
    },
};

Đưa các phần tử sau vào HTML:

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

Ví dụ về lệnh gọi lại được hiển thị kết quả

Lệnh gọi lại đã hiển thị kết quả phù hợp để sửa đổi trang sau khi trang được điền kết quả. Thẻ này được thiết kế để giúp bạn dễ dàng sửa đổi chế độ hiển thị kết quả mà không cần gọi lại chịu hoàn toàn trách nhiệm trong việc hiển thị kết quả.

Các ví dụ sau đây minh hoạ hai ứng dụng của lệnh gọi lại kết xuất được kết quả không hoạt động trên các kết quả.

Xác định trang kết quả cuối cùng

Lệnh gọi lại kết quả đã hiển thị này cho thấy rằng chúng ta đang hiển thị trang cuối cùng và bật lên một cảnh báo nhắc người dùng rằng họ đã đến trang cuối. 

<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");
    }
};

Cài đặt lệnh gọi lạ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,
  },
};

Đưa các phần tử sau vào HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Tăng cỡ chữ của "con trỏ" đường liên kết

Bản minh hoạ lệnh gọi lại kết quả được hiển thị này giúp tăng kích thước phông chữ của "con trỏ" số chọn trang kết quả.

Cỡ chữ mặc định là 12px. Ở đây, chúng ta tăng kích thước lên 20px. 

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

Cài đặt lệnh gọi lạ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,
  },
};

Đưa các phần tử sau vào HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Sử dụng chữ cái cho "Con trỏ" Nhãn

Lệnh gọi lại kết quả được hiển thị này thay đổi các đường liên kết trang trong "con trỏ" từ số sang chữ cái. 

<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];
    }
};

Cài đặt lệnh gọi lạ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,
  },
};

Đưa các phần tử sau vào HTML:

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

Ví dụ về lệnh gọi lại kết quả đã sẵn sàng

Hiển thị kết quả với nền có màu xen kẽ

Định dạng lệnh gọi lại này dẫn đến việc nền sáng và tối xen kẽ. 

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

Lưu ý: Mã này được viết bằng JavaScript/ES6. Công cụ này sẽ chạy trên hầu hết các trình duyệt, nhưng sẽ cần sang JavaScript/ES5 cho Internet Explorer và một vài trình duyệt. 

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,
  },
};

Đưa các phần tử sau vào HTML:

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

Đám mây từ

Ứng dụng rõ ràng của lệnh gọi lại kết quả đã sẵn sàng là hiển thị kết quả tìm kiếm bằng một định dạng khó tiếp cận bằng cách sử dụng lệnh gọi lại kết quả được hiển thị để tinh chỉnh HTML. Lệnh gọi lại kết quả đã sẵn sàng bắt đầu bằng một div trống. Một ví dụ trong tài liệu về Search Element API đã cho thấy cách sử dụng lệnh gọi lại để hiển thị một phiên bản kết quả rất đơn giản. Ví dụ khác cho biết cách giữ lại dữ liệu kết quả từ lệnh gọi lại kết quả đã sẵn sàng và truyền dữ liệu đó đến lệnh gọi lại kết quả được hiển thị, trong đó bạn có thể dùng lệnh gọi lại để trang trí kết quả chuẩn màn hình.

Lệnh gọi lại kết quả sẵn sàng sau đây cho thấy rằng kết quả tìm kiếm không cần phải là một danh sách kết quả. URL này thay thế cách hiển thị kết quả tìm kiếm thông thường với một đám mây từ gồm các từ được tìm thấy trong kết quả' tiêu đề và nội dung. Khi danh sách kết quả chỉ là một bước trung gian của người dùng, lệnh gọi lại như thế này có thể bỏ qua giai đoạn đó và sử dụng kết quả để trình bày báo cáo mà người dùng muốn.

Tạo đám mây Word từ nội dung của kết quả tìm kiếm 
<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>

Lưu ý: Mã này được viết bằng JavaScript/ES6. Công cụ này sẽ chạy trên hầu hết các trình duyệt, nhưng sẽ cần được chuyển đổi sang JavaScript/ES5 cho Internet Explorer và một số các trình duyệt cũ hơn. 

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,
    },
};

Đưa các phần tử sau vào HTML:

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

Ví dụ về lệnh gọi lại hai phần

Bạn có thể sử dụng kết hợp các lệnh gọi lại kết quả đã sẵn sàng và kết quả được hiển thị để truyền thông tin từ phương thức gọi lại trước đây sang phương thức gọi lại sau. Ví dụ: thông tin trong mảng các đối tượng kết quả có sẵn cho lệnh gọi lại kết quả đã sẵn sàng nhưng không có sẵn cho lệnh gọi lại kết quả được hiển thị. Bằng cách lưu thông tin đó vào một mảng trong lệnh gọi lại sẵn sàng cho kết quả, chúng ta có thể cho phép lệnh gọi lại kết quả được hiển thị.

Một ví dụ cho trường hợp này là bỏ qua bảng xem trước xuất hiện khi người dùng nhấp vào kết quả hình ảnh. Với lệnh gọi lại gồm 2 phần, chúng ta có thể cho phép kết quả hình ảnh liên kết trực tiếp đến các trang web tương ứng thay vì hiển thị bản xem trước của hình ảnh khi người dùng nhấp vào.

Bỏ qua bản xem trước hình ảnh 
<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,
  },
};

Đưa các phần tử sau vào HTML:

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