আরো অনুসন্ধান উপাদান কলব্যাক উদাহরণ

এই পৃষ্ঠায় সার্চ এলিমেন্ট কলব্যাক ব্যবহারের বিভিন্ন উদাহরণ রয়েছে। এগুলি কাস্টম সার্চ এলিমেন্ট এপিআই ডকুমেন্টের কলব্যাকস বিভাগে থাকা উদাহরণগুলির পরিপূরক।

অনুসন্ধান শুরুর কলব্যাক উদাহরণ

সার্চ শুরুর কলব্যাকটি সার্চের জন্য ব্যবহৃত হওয়ার আগে কোয়েরিটি পরিবর্তন করতে পারে। প্রোগ্রামেবল সার্চ ইঞ্জিনটিকে কোয়েরিতে পূর্বনির্ধারিত টার্ম অন্তর্ভুক্ত করার জন্য কনফিগার করা যেতে পারে, কিন্তু এই কলব্যাকটি, কলব্যাক ফাংশনের কাছে উপলব্ধ যেকোনো তথ্যের উপর ভিত্তি করে কোয়েরিটি পরিবর্তন করতে পারে।

নিম্নলিখিত সার্চ শুরুর কলব্যাকটি প্রতিটি কোয়েরিকে সপ্তাহের বর্তমান দিন দিয়ে সজ্জিত করে।

অনুসন্ধান শুরুর কলব্যাক উদাহরণ 
<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:g9ckaktfipe"></script>

ব্যবহারকারীর সম্মতি যাচাইয়ের মাধ্যমে localStorage এ সাম্প্রতিক সার্চগুলো সংরক্ষণ করার জন্য হেল্পার ফাংশনটি সংজ্ঞায়িত করুন:

      // For this demo, consent is assumed to be granted.
        // In production, integrate this with your site's Consent Management Platform (CMP).
        window.__hasStorageConsent = true;

        function hasStorageConsent() {
          return window.__hasStorageConsent === true;
        }

        function saveRecentSearch(query) {
          if (!query || !hasStorageConsent()) return;

          let searches = [];
          try {
            searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
          } catch (e) {
            console.warn("Invalid localStorage data, resetting:", e);
            // searches remains [] to overwrite the corrupted data
          }

          searches = searches.filter(item => item !== query);
          searches.unshift(query);
          searches = searches.slice(0, 5);

          try {
            localStorage.setItem("recentSearches", JSON.stringify(searches));
          } catch (e) {
            console.warn("Unable to access localStorage:", e);
          }
        }

সার্চ শুরুর কলব্যাকটি রেজিস্টার করুন। cse.js লোড করার আগে কলব্যাকগুলো অবশ্যই গ্লোবাল __gcse অবজেক্টে রেজিস্টার করতে হবে।

      // Install the callback.
        window.__gcse || (window.__gcse = {});
        window.__gcse.searchCallbacks = {
          web: {
            starting: function (gname, query) {
              saveRecentSearch(query);
              renderRecentSearches();
              return query; // continue normal search
            },
          },
        };

সাম্প্রতিক অনুসন্ধানগুলিকে ক্লিকযোগ্য আইটেম হিসাবে রেন্ডার করার জন্য একটি ফাংশন সংজ্ঞায়িত করুন এবং পৃষ্ঠা লোড হওয়ার সাথে সাথে এটিকে ইনিশিয়ালাইজ করুন:

      function renderRecentSearches() {
        const container = document.getElementById("recent-searches");
        if (!container) return;
        if (!hasStorageConsent()) {
          container.innerHTML = "";
          try {
            localStorage.removeItem("recentSearches");
          } catch(e) {}
          return;
        }
        let searches = [];
        try {
          searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
        } catch (e) {
          console.warn("Unable to access localStorage:", e);
        }
        container.innerHTML = "";
        searches.forEach(q => {
          const item = document.createElement("button");
          item.type = "button";
          item.textContent = q;
          item.onclick = () => {
            const input = document.querySelector("input.gsc-input");
            const button = document.querySelector("button.gsc-search-button");
            if (input) input.value = q;
            if (button) button.click();
          };
          container.appendChild(item);
        });
      }

      window.addEventListener("DOMContentLoaded", function () {
        renderRecentSearches();
      });

HTML-এ এই উপাদানগুলো অন্তর্ভুক্ত করুন:

      
        <style>
          #recent-searches button {
            display: inline-block;
            margin-right: 8px;
            margin-top: 4px;
            padding: 2px 8px;
            background-color: #f1f3f4;
            border: 1px solid #dadce0;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
          }
        </style>
        <div class="gcse-search"></div>
        <div id="recent-searches"></div>

সীমাবদ্ধতা

  • ডেটা শুধুমাত্র ব্রাউজারে ( localStorage ) সংরক্ষিত থাকে এবং এর জন্য ব্যবহারকারীর সম্মতি প্রয়োজন।
  • ডিভাইস বা ব্যবহারকারীদের মধ্যে শেয়ার করা হয় না।
  • ব্রাউজার স্টোরেজ খালি করা হলে এটিও মুছে যায়।
  • এই পৃষ্ঠার বাইরে করা অনুসন্ধানগুলি ট্র্যাক করা হয় না।

ফলাফল রেন্ডার করার কলব্যাক উদাহরণ

ফলাফল দিয়ে পৃষ্ঠাটি পূরণ হয়ে যাওয়ার পর সেটিকে পরিবর্তন করার জন্য 'results rendered' কলব্যাকটি বেশ উপযোগী। এটিকে এমনভাবে ডিজাইন করা হয়েছে যাতে ফলাফল রেন্ডার করার সম্পূর্ণ দায়িত্ব কলব্যাকটির ওপর না চাপিয়েই, ফলাফলের প্রদর্শন সহজে পরিবর্তন করা যায়।

নিম্নলিখিত উদাহরণগুলি 'results rendered' কলব্যাকের এমন দুটি প্রয়োগ তুলে ধরে, যেগুলি ফলাফলের উপর কোনো কাজ করে না।

শেষ ফলাফল পৃষ্ঠা সনাক্ত করুন

এই 'ফলাফল রেন্ডার ' কলব্যাকটি জানিয়ে দেয় যে আমরা ফলাফলের শেষ পৃষ্ঠাটি প্রদর্শন করছি, এবং ব্যবহারকারীকে মনে করিয়ে দেওয়ার জন্য একটি অ্যালার্ট পপ-আপ করে যে তিনি শেষ প্রান্তে পৌঁছে গেছেন।

<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>
'কার্সর' লিঙ্কগুলির ফন্ট সাইজ বৃদ্ধি করা

এই রেজাল্ট রেন্ডার কলব্যাক ডেমোটি ফলাফলের পৃষ্ঠা নির্বাচনকারী 'কার্সর' নম্বরগুলির ফন্ট সাইজ বৃদ্ধি করে।

ডিফল্ট ফন্ট সাইজ হলো ১২ পিক্সেল। এখানে আমরা এটিকে বাড়িয়ে ২০ পিক্সেল করেছি। 

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

দ্রষ্টব্য: এই কোডটি জাভাস্ক্রিপ্ট/ES6-এ লেখা হয়েছে। এটি বেশিরভাগ ব্রাউজারে চলবে, তবে ইন্টারনেট এক্সপ্লোরার এবং আরও কয়েকটি পুরোনো ব্রাউজারের জন্য এটিকে জাভাস্ক্রিপ্ট/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>

শব্দ মেঘ

'results ready ' কলব্যাকের সবচেয়ে সহজ প্রয়োগ হলো সার্চের ফলাফল এমন একটি ফরম্যাটে প্রদর্শন করা, যা ' results rendered ' কলব্যাক ব্যবহার করে HTML পরিবর্তন করার মাধ্যমে অর্জন করা কঠিন। ' results ready ' কলব্যাকটি একটি খালি div দিয়ে শুরু হয়। 'Search Element API' ডকুমেন্টের একটি উদাহরণে দেখানো হয়েছে কীভাবে এই কলব্যাক ব্যবহার করে ফলাফলের একটি খুব সাধারণ সংস্করণ রেন্ডার করা যায়। আরেকটি উদাহরণে দেখানো হয়েছে কীভাবে 'results ready ' কলব্যাক থেকে ফলাফলের ডেটা ধরে রেখে তা 'results rendered ' কলব্যাকে পাঠানো যায়, যেখানে এটি সাধারণ ফলাফল প্রদর্শনকে সজ্জিত করতে ব্যবহার করা যেতে পারে।

নিম্নলিখিত 'ফলাফল প্রস্তুত ' কলব্যাকটি দেখায় যে অনুসন্ধানের ফলাফলকে ফলাফলের একটি তালিকা হতে হবে এমন কোনো বাধ্যবাধকতা নেই। এটি অনুসন্ধানের ফলাফলের স্বাভাবিক প্রদর্শনকে প্রতিস্থাপন করে, ফলাফলের শিরোনাম এবং বিষয়বস্তুতে পাওয়া শব্দগুলোর একটি ওয়ার্ড ক্লাউড প্রদর্শন করে। যখন ফলাফলের তালিকাটি আপনার ব্যবহারকারীর জন্য শুধুমাত্র একটি মধ্যবর্তী ধাপ হয়, তখন এই ধরনের একটি কলব্যাক সেই পর্যায়টিকে এড়িয়ে যেতে পারে এবং ব্যবহারকারীর কাঙ্ক্ষিত প্রতিবেদনটি উপস্থাপন করার জন্য ফলাফলগুলো ব্যবহার করতে পারে।

অনুসন্ধানের ফলাফলের বিষয়বস্তু থেকে একটি ওয়ার্ড ক্লাউড তৈরি করুন 
<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>

দ্রষ্টব্য: এই কোডটি জাভাস্ক্রিপ্ট/ES6-এ লেখা হয়েছে। এটি বেশিরভাগ ব্রাউজারে চলবে, তবে ইন্টারনেট এক্সপ্লোরার এবং আরও কয়েকটি পুরোনো ব্রাউজারের জন্য এটিকে জাভাস্ক্রিপ্ট/ES5-এ রূপান্তর করতে হবে। 

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>

দুই অংশের কলব্যাক উদাহরণ

`results ready` এবং `results rendered` কলব্যাক দুটিকে একত্রে ব্যবহার করে পূর্ববর্তীটি থেকে পরবর্তীটিতে তথ্য পাঠানো যায়। উদাহরণস্বরূপ, `result` অবজেক্টের অ্যারেতে থাকা তথ্য `results ready` কলব্যাকের জন্য উপলব্ধ, কিন্তু `results rendered` কলব্যাকের জন্য নয়। `results ready` কলব্যাকের অংশ হিসেবে সেই তথ্যকে একটি অ্যারেতে সংরক্ষণ করার মাধ্যমে আমরা এটিকে `results rendered` কলব্যাকের জন্য সহজলভ্য করে তুলতে পারি।

এর একটি উদাহরণ হলো, কোনো ছবির ফলাফলে ক্লিক করলে যে প্রিভিউ প্যানেলটি দেখানো হয়, তা এড়িয়ে যাওয়া। একটি দ্বি-অংশীয় কলব্যাকের মাধ্যমে আমরা ছবির ফলাফলে ক্লিক করলে প্রিভিউ দেখানোর পরিবর্তে সেগুলোকে সরাসরি সংশ্লিষ্ট ওয়েবসাইটে লিঙ্ক করতে পারি।

ছবির প্রিভিউ বাইপাস করুন 
<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>