প্রোগ্রামেবল অনুসন্ধান উপাদান নিয়ন্ত্রণ API

আপনি HTML মার্কআপ ব্যবহার করে আপনার ওয়েব পৃষ্ঠা এবং অন্যান্য ওয়েব অ্যাপ্লিকেশনগুলিতে প্রোগ্রামেবল সার্চ ইঞ্জিন উপাদান (সার্চ বক্স এবং অনুসন্ধান ফলাফল পৃষ্ঠা) এম্বেড করতে পারেন। এই প্রোগ্রামেবল সার্চ ইঞ্জিন উপাদানগুলি এমন উপাদানগুলি নিয়ে গঠিত যা প্রোগ্রামেবল অনুসন্ধান সার্ভারের দ্বারা সংরক্ষিত সেটিংসের উপর ভিত্তি করে রেন্ডার করা হয়, আপনার করা যেকোনো কাস্টমাইজেশন সহ।

সমস্ত জাভাস্ক্রিপ্ট অ্যাসিঙ্ক্রোনাসভাবে লোড করা হয়, যা ব্রাউজার প্রোগ্রামেবল সার্চ ইঞ্জিন জাভাস্ক্রিপ্ট আনার সময় আপনার ওয়েবপৃষ্ঠাটিকে লোড করা চালিয়ে যেতে দেয়।

ভূমিকা

এই নথিটি আপনার ওয়েব পৃষ্ঠায় প্রোগ্রামেবল সার্চ ইঞ্জিন উপাদান যোগ করার জন্য একটি মৌলিক মডেল প্রদান করে, সাথে উপাদানটির কনফিগারযোগ্য উপাদান এবং নমনীয় জাভাস্ক্রিপ্ট এপিআইয়ের ব্যাখ্যা।

ব্যাপ্তি

এই নথিটি বর্ণনা করে কিভাবে প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল API-এর জন্য নির্দিষ্ট ফাংশন এবং বৈশিষ্ট্যগুলি ব্যবহার করতে হয়৷

ব্রাউজার সামঞ্জস্য

প্রোগ্রামেবল সার্চ ইঞ্জিন দ্বারা সমর্থিত ব্রাউজারগুলির তালিকা এখানে পাওয়া যাবে।

শ্রোতা

এই ডকুমেন্টেশনটি তাদের পৃষ্ঠাগুলিতে Google প্রোগ্রামেবল অনুসন্ধান কার্যকারিতা যুক্ত করতে চান এমন ডেভেলপারদের জন্য উদ্দিষ্ট৷

প্রোগ্রামেবল অনুসন্ধান উপাদান

আপনি আপনার পৃষ্ঠায় একটি প্রোগ্রামযোগ্য অনুসন্ধান উপাদান যোগ করতে HTML মার্কআপ ব্যবহার করতে পারেন। প্রতিটি উপাদান অন্তত একটি উপাদান নিয়ে গঠিত: একটি অনুসন্ধান বাক্স, অনুসন্ধান ফলাফলের একটি ব্লক, বা উভয়। অনুসন্ধান বাক্স নিম্নলিখিত উপায়ে ব্যবহারকারীর ইনপুট গ্রহণ করে:

• টেক্সট ইনপুট ক্ষেত্রে টাইপ করা একটি অনুসন্ধান ক্যোয়ারী
• একটি URL এ এমবেড করা একটি ক্যোয়ারী স্ট্রিং৷
• প্রোগ্রাম্যাটিক এক্সিকিউশন

উপরন্তু, অনুসন্ধান ফলাফলের ব্লক নিম্নলিখিত উপায়ে ইনপুট গ্রহণ করে:

• একটি URL এ এমবেড করা একটি ক্যোয়ারী স্ট্রিং৷
• প্রোগ্রাম্যাটিক এক্সিকিউশন

নিম্নলিখিত ধরনের প্রোগ্রামেবল অনুসন্ধান উপাদান উপলব্ধ:

আপনি আপনার ওয়েবপৃষ্ঠায় বৈধ অনুসন্ধান উপাদানগুলির যেকোনো সংখ্যা যোগ করতে পারেন। দুই-কলাম মোডের জন্য, সমস্ত প্রয়োজনীয় উপাদান (একটি অনুসন্ধান বাক্স এবং অনুসন্ধান ফলাফল ব্লক) উপস্থিত থাকতে হবে।

এখানে একটি সাধারণ অনুসন্ধান উপাদানের একটি উদাহরণ রয়েছে:

<!-- Put the following javascript before the closing </head> tag
and replace 123456 with your own Programmable Search Engine ID. -->
<script async src="https://cse.google.com/cse.js?cx=123456"></script>

<!-- Place this tag where you want both of the search box and the search results to render -->
<div class="gcse-search"></div>

প্রোগ্রামেবল অনুসন্ধান উপাদান ব্যবহার করে বিভিন্ন লেআউট বিকল্প রচনা করুন

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

লেআউট বিকল্প সম্পর্কে আরও তথ্য।

প্রোগ্রামেবল অনুসন্ধান উপাদান কাস্টমাইজ করা

রঙ, ফন্ট বা লিঙ্ক শৈলী কাস্টমাইজ করতে, আপনার প্রোগ্রামেবল সার্চ ইঞ্জিনের চেহারা এবং অনুভূতি পৃষ্ঠাতে যান।

আপনি প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে তৈরি কনফিগারেশন ওভাররাইট করতে ঐচ্ছিক বৈশিষ্ট্য ব্যবহার করতে পারেন। এটি আপনাকে একটি পৃষ্ঠা-নির্দিষ্ট অনুসন্ধান অভিজ্ঞতা তৈরি করতে সক্ষম করে। উদাহরণস্বরূপ, নিম্নলিখিত কোডটি একটি অনুসন্ধান বাক্স তৈরি করে যা একটি নতুন উইন্ডোতে একটি ফলাফল পৃষ্ঠা (http://www.example.com?search=lady+gaga) খোলে। ব্যবহারকারীর ক্যোয়ারী স্ট্রিং সহ queryParameterName অ্যাট্রিবিউটের মান ফলাফলের URL তৈরি করতে ব্যবহৃত হয়।

মনে রাখবেন যে queryParameterName অ্যাট্রিবিউটটি data- এর সাথে উপসর্গযুক্ত। এই উপসর্গ সমস্ত বৈশিষ্ট্যের জন্য প্রয়োজন.

<div class="gcse-searchbox-only" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search">

আপনি যদি স্বয়ংসম্পূর্ণ বা পরিমার্জনার মতো বৈশিষ্ট্যগুলি সক্ষম করতে প্রোগ্রামেবল সার্চ ইঞ্জিন নিয়ন্ত্রণ প্যানেল ব্যবহার করে থাকেন তবে আপনি সেই বৈশিষ্ট্যগুলি কাস্টমাইজ করতে বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন৷ এই বৈশিষ্ট্যগুলি ব্যবহার করে আপনি যে কোনও কাস্টমাইজেশন নির্দিষ্ট করেছেন তা নিয়ন্ত্রণ প্যানেলে তৈরি সেটিংসকে ওভাররাইড করবে৷ নিম্নলিখিত উদাহরণটি নিম্নলিখিত বৈশিষ্ট্যগুলির সাথে একটি দুই-কলাম অনুসন্ধান উপাদান তৈরি করে:

• ইতিহাস ব্যবস্থাপনা সক্ষম করা হয়েছে
• প্রদর্শিত স্বয়ংসম্পূর্ণতার সর্বাধিক সংখ্যা 5 এ সেট করা হয়েছে৷
• পরিশোধন লিঙ্ক হিসাবে প্রদর্শিত হয়.

<div class="gcse-searchbox" data-enableHistory="true" data-autoCompleteMaxCompletions="5">
<div class="gcse-searchresults" data-refinementStyle="link">

সমর্থিত বৈশিষ্ট্য

<div class="gcse-searchbox" data-gname="storesearch"></div>
<div class="gcse-searchresults" data-gname="storesearch"></div>

কলব্যাক

কলব্যাকগুলি অনুসন্ধান-উপাদান প্রাথমিককরণ এবং অনুসন্ধান প্রক্রিয়াগুলির বিস্তারিত নিয়ন্ত্রণ সমর্থন করে। তারা সার্চ এলিমেন্ট জাভাস্ক্রিপ্টের সাথে বিশ্বব্যাপী __gcse অবজেক্টের মাধ্যমে নিবন্ধিত। রেজিস্টার কলব্যাক সমস্ত সমর্থিত কলব্যাকের নিবন্ধনকে চিত্রিত করে।

  window.__gcse = {
    parsetags: 'explicit', // Defaults to 'onload'
    initializationCallback: myInitializationCallback,
    searchCallbacks: {
      image: {
        starting: myImageSearchStartingCallback,
        ready: myImageResultsReadyCallback,
        rendered: myImageResultsRenderedCallback,
      },
      web: {
        starting: myWebSearchStartingCallback,
        ready: myWebResultsReadyCallback,
        rendered: myWebResultsRenderedCallback,
      },
    },
  };
  

সূচনা কলব্যাক

সার্চ এলিমেন্ট জাভাস্ক্রিপ্ট DOM-এ সার্চ এলিমেন্ট রেন্ডার করার আগে ইনিশিয়ালাইজেশন কলব্যাক ডাকা হয়। যদি parsetags __gcse এ explicit সেট করা থাকে, অনুসন্ধান উপাদান জাভাস্ক্রিপ্ট অনুসন্ধান উপাদানগুলিকে প্রারম্ভিক কলব্যাকে রেন্ডারিং ছেড়ে দেয় (যেমন রেজিস্টার কলব্যাকগুলিতে দেখানো হয়েছে)। এটি রেন্ডার করার জন্য উপাদান নির্বাচন করতে বা উপাদানগুলির প্রয়োজন না হওয়া পর্যন্ত রেন্ডারিং স্থগিত করতে ব্যবহার করা যেতে পারে। এটি উপাদানগুলির বৈশিষ্ট্যগুলিকেও ওভাররাইড করতে পারে; উদাহরণস্বরূপ, এটি একটি সার্চবক্সকে পরিণত করতে পারে যা কন্ট্রোল প্যানেল বা HTML অ্যাট্রিবিউটের মাধ্যমে কনফিগার করা হয়েছে ওয়েব সার্চের জন্য ডিফল্ট হিসেবে একটি ইমেজ সার্চ বক্সে, অথবা নির্দিষ্ট করতে পারে যে একটি প্রোগ্রামেবল সার্চ ইঞ্জিন ফর্মের মাধ্যমে জমা দেওয়া প্রশ্নগুলি শুধুমাত্র-সার্চ-রেজাল্ট এলিমেন্টে কার্যকর করা হয়। একটি ডেমো দেখুন.

প্রারম্ভিক কলব্যাকের ভূমিকা __gcse এর parsetags সম্পত্তির মান দ্বারা নিয়ন্ত্রিত হয়।

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

নিচের কোডটি দেখায় কিভাবে একটি সার্চ বক্স রেন্ডার করতে হয়, সার্চ ফলাফলের সাথে, একটি div এ, explicit পার্সেট্যাগ এবং ইনিশিয়ালাইজেশন কলব্যাক ব্যবহার করে:

    <div id="test"></div>

const myInitCallback = function() {
  if (document.readyState == 'complete') {
    // Document is ready when Search Element is initialized.
    // Render an element with both search box and search results in div with id 'test'.
    google.search.cse.element.render(
        {
          div: "test",
          tag: 'search'
         });
  } else {
    // Document is not ready yet, when Search Element is initialized.
    google.setOnLoadCallback(function() {
       // Render an element with both search box and search results in div with id 'test'.
        google.search.cse.element.render(
            {
              div: "test",
              tag: 'search'
            });
    }, true);
  }
};

// Insert it before the Search Element code snippet so the global properties like parsetags and callback
// are available when cse.js runs.
window.__gcse = {
  parsetags: 'explicit',
  initializationCallback: myInitCallback
};

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

কলব্যাক অনুসন্ধান করুন

অনুসন্ধান উপাদান জাভাস্ক্রিপ্ট ছয়টি কলব্যাক সমর্থন করে যা অনুসন্ধান নিয়ন্ত্রণ প্রবাহে কাজ করে। অনুসন্ধান কলব্যাক জোড়ায় আসে, একটি ওয়েব-সার্চ কলব্যাক এবং মিলিত ইমেজ-সার্চ কলব্যাক:

• অনুসন্ধান শুরু
  • ছবি অনুসন্ধানের জন্য
  • ওয়েব অনুসন্ধানের জন্য
• ফলাফল প্রস্তুত
  • ছবি অনুসন্ধানের জন্য
  • ওয়েব অনুসন্ধানের জন্য
• রেন্ডার করা ফলাফল
  • ছবি অনুসন্ধানের জন্য
  • ওয়েব অনুসন্ধানের জন্য

ইনিশিয়ালাইজেশন কলব্যাকের মতো, সার্চ কলব্যাকগুলি __gcse অবজেক্টের এন্ট্রি ব্যবহার করে কনফিগার করা হয়। সার্চ এলিমেন্ট জাভাস্ক্রিপ্ট শুরু হওয়ার সাথে সাথে এটি ঘটে। স্টার্টআপের পরে __gcse তে পরিবর্তন উপেক্ষা করা হয়।

এই কলব্যাকগুলির প্রতিটি একটি আর্গুমেন্ট হিসাবে অনুসন্ধান উপাদানের জন্য gName পাস করা হয়৷ একটি পৃষ্ঠায় একাধিক অনুসন্ধান থাকলে gname কার্যকর। data-gname অ্যাট্রিবিউট ব্যবহার করে একটি অনুসন্ধান উপাদানকে একটি gname মান দিন:

<div class="gcse-searchbox" data-gname="storesearch"></div>

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

ছবি/ওয়েব সার্চ-স্টার্টিং কলব্যাক

অনুসন্ধান এলিমেন্ট জাভাস্ক্রিপ্ট তার সার্ভার থেকে অনুসন্ধানের ফলাফলের অনুরোধ করার আগেই অনুসন্ধান শুরু করার কলব্যাকগুলি আহ্বান করা হয়৷ একটি উদাহরণ ব্যবহার-কেস কোয়েরির পরিবর্তনগুলি নিয়ন্ত্রণ করতে দিনের স্থানীয় সময় ব্যবহার করা হবে।

searchStartingCallback(gname, query)

gname

অনুসন্ধান উপাদান এর সনাক্তকারী স্ট্রিং

query

ব্যবহারকারীর দ্বারা প্রবেশ করা মান (সম্ভবত অনুসন্ধান উপাদান জাভাস্ক্রিপ্ট দ্বারা পরিবর্তিত।)

কলব্যাক সেই মান প্রদান করে যা এই অনুসন্ধানের জন্য ক্যোয়ারী হিসাবে ব্যবহার করা উচিত। যদি এটি একটি খালি স্ট্রিং প্রদান করে, তবে রিটার্ন মান উপেক্ষা করা হয় এবং কলকারী অপরিবর্তিত ক্যোয়ারী ব্যবহার করে।

বিকল্পভাবে, আপনি কলব্যাক ফাংশনটি __gcse অবজেক্টে রাখতে পারেন বা জাভাস্ক্রিপ্টের সাথে বস্তুতে গতিশীলভাবে কলব্যাক যোগ করতে পারেন:

window.__gcse['searchCallbacks']['web']['starting'] = function(gname, query) {...};

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

উদাহরণ অনুসন্ধান শুরু করার কলব্যাকের উদাহরণ অনুসন্ধান শুরু হওয়া কলব্যাক দিনের সময়ের উপর নির্ভর করে কোয়েরিতে morning বা afternoon যোগ করে।

    const myWebSearchStartingCallback = (gname, query) => {
      const hour = new Date().getHours();
      return query + (hour < 12 ? ' morning' : ' afternoon');
    };
    window.myImageSearchStartingCallbackName = myWebSearchStartingCallback;

window.__gcse:

  window.__gcse || (window.__gcse = {});
    window.__gcse.searchCallbacks = {
      image: {
        starting: 'myImageSearchStartingCallbackName',
      },
      web: {
        starting: myWebSearchStartingCallback,
      },
    };
  

  <script
  async src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

ছবি/ওয়েব অনুসন্ধানের ফলাফল-প্রস্তুত কলব্যাক

সার্চ এলিমেন্ট জাভাস্ক্রিপ্ট প্রচার এবং ফলাফল রেন্ডার করার আগে এই কলব্যাকগুলিকে আহ্বান করা হয়। একটি উদাহরণ ব্যবহারের ক্ষেত্রে একটি কলব্যাক হবে যা প্রচারগুলিকে রেন্ডার করে এবং একটি শৈলীতে পরিণত করে যা স্বাভাবিক কাস্টমাইজেশনের সাথে নির্দিষ্ট করা যায় না।

resultsReadyCallback(gname, query, promos, results, div)

gname

অনুসন্ধান উপাদান এর সনাক্তকারী স্ট্রিং

query

এই ফলাফল উত্পাদিত ক্যোয়ারী

promos

প্রচার বস্তুর একটি অ্যারে, যা ব্যবহারকারীর প্রশ্নের জন্য মিলিত প্রচারের সাথে মিলে যায়। প্রচার বস্তুর সংজ্ঞা দেখুন।

results

ফলাফল বস্তুর একটি অ্যারে। ফলাফল বস্তুর সংজ্ঞা দেখুন।

div

একটি HTML ডিভ DOM-এ অবস্থান করে যেখানে সার্চ এলিমেন্ট সাধারণত প্রচার এবং অনুসন্ধান ফলাফল রাখে। সাধারনত, সার্চ এলিমেন্ট জাভাস্ক্রিপ্ট এই ডিভটি পপুলেশন পরিচালনা করবে, কিন্তু এই কলব্যাকটি ফলাফলের স্বয়ংক্রিয় রেন্ডারিং বন্ধ করতে এবং ফলাফল নিজেই রেন্ডার করতে এই div ব্যবহার করতে পারে।

যদি এই কলব্যাকটি একটি true মান প্রদান করে, অনুসন্ধান উপাদান জাভাস্ক্রিপ্ট তার পৃষ্ঠা-ফুটারের কাজে চলে যায়।

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

উদাহরণ resultsReady রেডি কলব্যাকের উদাহরণ রেডি কলব্যাক একটি খুব সাধারণ প্রতিস্থাপনের মাধ্যমে প্রচার এবং ফলাফলের ডিফল্ট উপস্থাপনাকে ওভাররাইড করে।

    const myResultsReadyCallback = function(name, q, promos, results, resultsDiv) {
      const makePromoElt = (promo) => {
        const anchor = document.createElement('a');
        anchor.href = promo['url'];
        anchor.target = '_blank';
        anchor.classList.add('gs-title');
        const span = document.createElement('span');
        span.innerHTML = 'Promo: ' + promo['title'];
        anchor.appendChild(span);
        return anchor;
      };
      const makeResultParts = (result) => {
        const anchor = document.createElement('a');
        anchor.href = result['url'];
        anchor.target = '_blank';
        anchor.classList.add('gs_title');
        anchor.appendChild(document.createTextNode(result['visibleUrl']));
        const span = document.createElement('span');
        span.innerHTML = ' ' + result['title'];
        return [anchor, span];
      };

      const table = document.createElement('table');
      if (promos) {
        for (const promo of promos) {
          const row = table.insertRow(-1);
          const cell = row.insertCell(-1);
          cell.appendChild(makePromoElt(promo));
        }
        resultsDiv.appendChild(table);
        resultsDiv.appendChild(document.createElement('br'));
      }
      if (results) {
        const table = document.createElement('table');
        for (const result of results) {
          const row = table.insertRow(-1);
          const cell = row.insertCell(-1);
          const [anchor, span] = makeResultParts(result);
          cell.appendChild(anchor);
          const cell2 = row.insertCell(-1);
          cell2.appendChild(span);
        }
        resultsDiv.appendChild(table);
      }
      return true;
    };

  window.__gcse || (window.__gcse = {});
    window.__gcse.searchCallbacks = {
      web: {
        ready: myResultsReadyCallback,
      },
    };

  <script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

ইমেজ/ওয়েব সার্চের ফলাফল-রেন্ডার করা কলব্যাক

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

যদি একটি ফলাফল রেন্ডার করা কলব্যাকের জন্য এমন তথ্যের প্রয়োজন হয় যা ফলাফলের রেডি কলব্যাকের promos এবং results প্যারামিটারে ছিল, তাহলে এটি তাদের মধ্যে পাস করতে পারে, যেমন:

callback(gname, query, promoElts, resultElts);

gname

অনুসন্ধান উপাদান এর সনাক্তকারী স্ট্রিং

query

অনুসন্ধান স্ট্রিং

promoElts

প্রচার সহ DOM উপাদানগুলির একটি অ্যারে৷

resultElts

ফলাফল ধারণকারী DOM উপাদানের একটি অ্যারে।

কোন রিটার্ন মান নেই।

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

উদাহরণের resultsRendered রেন্ডার করা কলব্যাকের উদাহরণ রেন্ডার করা কলব্যাক প্রতিটি প্রচার এবং ফলাফলে একটি ডামি Keep চেকবক্স যোগ করে।

myWebResultsRenderedCallback = function(name, q, promos, results) {
    for (const div of promos.concat(results)) {
      const innerDiv = document.createElement('div');
      innerDiv.appendChild(document.createTextNode('Keep: '));
      const checkBox = document.createElement('input');
      checkBox.type = 'checkbox';
      checkBox.name = 'save';
      innerDiv.appendChild(checkBox);
      div.insertAdjacentElement('afterbegin', innerDiv);
    }
  };

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: 'myWebResultsRenderedCallback',
  },
};

  <script async
    src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

যদি রেন্ডার করা ফলাফলের কলব্যাকের তথ্যের প্রয়োজন হয় যা ফলাফলের জন্য প্রস্তুত কলব্যাকে পাস করা হয়েছিল তবে এটি কলব্যাকের মধ্যে সেই ডেটাটি পাস করতে পারে। নিম্নলিখিত উদাহরণটি richSnippet থেকে রেন্ডার করা ফলাফল থেকে রেন্ডার করা কলব্যাক থেকে রেন্ডার করা ফলাফলে একটি রেটিং মান পাস করার অনেক উপায় দেখায়৷

const makeTwoPartCallback = () => {
  let saveForRenderCallback;
  const readyCallback = (name, q, promos, results, resultsDiv) =>
  {
    saveForRenderCallback = [];
    for (const result of results) {
      const {
        richSnippet: {
          answer = []
        } = {},
      } = result;
      const firstAnswer = answer[0];
      if (firstAnswer) {
        const upVotes = firstAnswer['upvotecount'];
        if (upVotes) {
          saveForRenderCallback.push(
            {upvotes: parseInt(upVotes, 10)}
          );
          continue;
        }
      }
      saveForRenderCallback.push({});
    }
  };
  const renderedCallback = (name, q, promos, results) => {
    for (let i = 0; i < results.length; ++i) {
      const div = results[i];
      const votes = saveForRenderCallback[i]['upvotes'];
      if (votes) {
        const innerDiv = document.createElement('div');
        innerDiv.innerHTML = '<b>Upvotes: ' + votes + '</b>';
         div.insertAdjacentElement('afterbegin', innerDiv);
      }
    }
  };
  return {readyCallback, renderedCallback};
};

const {
  readyCallback: webResultsReadyCallback,
  renderedCallback: webResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    ready: webResultsReadyCallback,
    rendered: webResultsRenderedCallback,
  },
};

  <script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:kdroeu4mwju"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

আরও কলব্যাক উদাহরণ

অতিরিক্ত কলব্যাক উদাহরণ আরও কলব্যাক উদাহরণ নথিতে পাওয়া যাবে।

প্রচার এবং ফলাফল বৈশিষ্ট্য

JSDoc স্বরলিপি ব্যবহার করে, এইগুলি প্রচার এবং ফলাফল বস্তুর বৈশিষ্ট্য। এখানে, আমরা উপস্থিত হতে পারে যে সমস্ত বৈশিষ্ট্য তালিকা. অনেক সম্পত্তির উপস্থিতি প্রচার বা অনুসন্ধান ফলাফলের বিবরণের উপর নির্ভর করে।

{
  content: string,
  image: {
    height: number,
    url: string,
    width: number,
  },
  title: string,
  url: string,
  visibleUrl: string,
}

{
  content: string,
  contentNoFormatting: string,
  contextUrl: string, // For image search results only
  fileFormat: string,
  image: { // For image search reseults only
    height: number,
    url: string,
    width: number,
  },
  perResultLabels: !Array<{
    anchor: string,
    label: string,
    labelWithOp: string,
  }>,
  richSnippet: !Array<!Object>, // For web search results only
  thumbnailImage: {
    height: number,
    url: string,
    width: number,
  },
  title: string,
  titleNoFormatting: string,
  url: string,
  visibleUrl: string,
}

richSnippet ফলাফলে অবজেক্টের একটি বিন্যাসের আলগা প্রকার রয়েছে। এই অ্যারের এন্ট্রির মানগুলি প্রতিটি অনুসন্ধান ফলাফলের জন্য ওয়েব পৃষ্ঠায় পাওয়া কাঠামোগত ডেটা দ্বারা নিয়ন্ত্রিত হয়৷ উদাহরণস্বরূপ, একটি পর্যালোচনা ওয়েব সাইটে স্ট্রাকচার্ড ডেটা অন্তর্ভুক্ত থাকতে পারে যা এই অ্যারে এন্ট্রিটিকে richSnippet এ যোগ করে:

'review': {
  'ratingstars': '3.0',
  'ratingcount': '1024',
},

প্রোগ্রামেবল সার্চ এলিমেন্ট কন্ট্রোল API (V2)

google.search.cse.element অবজেক্ট নিম্নলিখিত স্ট্যাটিক ফাংশন প্রকাশ করে:

var element = google.search.cse.element.getElement('element1');
            element.execute('news');