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

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

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

ভূমিকা

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

ব্যাপ্তি

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

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

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

পাঠকবর্গ

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

প্রোগ্রামেবল সার্চ এলিমেন্ট

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

  • টেক্সট ইনপুট ফিল্ডে টাইপ করা একটি সার্চ কোয়েরি
  • একটি URL-এ এমবেড করা একটি কোয়েরি স্ট্রিং
  • প্রোগ্রাম্যাটিক এক্সিকিউশন

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

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

নিম্নলিখিত ধরণের প্রোগ্রামেবল সার্চ এলিমেন্ট পাওয়া যায়:

এলিমেন্টের ধরণ উপাদান(গুলি) বিবরণ
মান <div class="gcse-search"> একটি সার্চ বক্স এবং সার্চ ফলাফল, একই <div> তে প্রদর্শিত হয়।
দুই-কলাম <div class="gcse-searchbox"> এবং <div class="gcse-searchresults"> দুই-কলামের লেআউট, যার একদিকে অনুসন্ধান ফলাফল এবং অন্যদিকে একটি অনুসন্ধান বাক্স। যদি আপনি আপনার ওয়েবপৃষ্ঠায় দুই-কলাম মোডে একাধিক উপাদান সন্নিবেশ করার পরিকল্পনা করেন, তাহলে আপনি gname বৈশিষ্ট্য ব্যবহার করে অনুসন্ধান ফলাফলের একটি ব্লকের সাথে একটি অনুসন্ধান বাক্স যুক্ত করতে পারেন।
শুধুমাত্র অনুসন্ধান বাক্স <div class="gcse-searchbox-only"> একটি স্বতন্ত্র অনুসন্ধান বাক্স।
শুধুমাত্র অনুসন্ধানের ফলাফল <div class="gcse-searchresults-only"> অনুসন্ধান ফলাফলের একটি স্বতন্ত্র ব্লক।

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

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

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

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

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

বিকল্প উপাদান(গুলি)
পূর্ণ-প্রস্থ <div class="gcse-search">
কম্প্যাক্ট <div class="gcse-search">
দুই-কলাম <div class="gcse-searchbox"> , <div class="gcse-searchresults">
দুই পৃষ্ঠার <div class="gcse-searchbox-only"> প্রথম পৃষ্ঠায়, <div class="gcse-searchresults-only"> (অথবা অন্যান্য উপাদান) দ্বিতীয় পৃষ্ঠায়।
শুধুমাত্র ফলাফল <div class="gcse-searchresults-only">
গুগল-হোস্টেড <div class="gcse-searchbox-only">

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

প্রোগ্রামেবল সার্চ এলিমেন্ট কাস্টমাইজ করা

রঙ, ফন্ট, অথবা লিঙ্ক স্টাইল কাস্টমাইজ করতে, আপনার প্রোগ্রামেবল সার্চ ইঞ্জিনের লুক অ্যান্ড ফিল পৃষ্ঠায় যান।

প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে তৈরি কনফিগারেশনগুলিকে ওভাররাইট করার জন্য আপনি ঐচ্ছিক বৈশিষ্ট্য ব্যবহার করতে পারেন। এটি আপনাকে একটি পৃষ্ঠা-নির্দিষ্ট অনুসন্ধান অভিজ্ঞতা তৈরি করতে সক্ষম করে। উদাহরণস্বরূপ, নিম্নলিখিত কোডটি একটি অনুসন্ধান বাক্স তৈরি করে যা একটি নতুন উইন্ডোতে একটি ফলাফল পৃষ্ঠা (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">

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

  • ইতিহাস ব্যবস্থাপনা সক্রিয় করা হয়েছে
  • প্রদর্শিত স্বয়ংসম্পূর্ণতার সর্বাধিক সংখ্যা ৫ এ সেট করা আছে
  • পরিমার্জনগুলি লিঙ্ক হিসাবে প্রদর্শিত হয়। 

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

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

বৈশিষ্ট্য আদর্শ বিবরণ উপাদান
সাধারণ
gname স্ট্রিং (ঐচ্ছিক) Search Element অবজেক্টের জন্য একটি নাম। নাম অনুসারে একটি সংশ্লিষ্ট উপাদান পুনরুদ্ধার করতে, অথবা একটি searchbox উপাদানকে একটি searchresults উপাদানের সাথে যুক্ত করতে একটি নাম ব্যবহার করা হয়। যদি সরবরাহ না করা হয়, তাহলে Programmable Search Engine ওয়েবপেজে উপাদানগুলির ক্রম অনুসারে স্বয়ংক্রিয়ভাবে একটি gname তৈরি করবে। উদাহরণস্বরূপ, প্রথম নামহীন searchbox-only তে gname "searchbox-only0" এবং দ্বিতীয়টিতে gname "seachbox-only1" থাকবে, ইত্যাদি। মনে রাখবেন যে দুই-কলাম লেআউটে একটি উপাদানের জন্য স্বয়ংক্রিয়ভাবে তৈরি gname হবে two-column । নিম্নলিখিত উদাহরণে একটি searchbox উপাদানকে একটি searchresults উপাদানের সাথে লিঙ্ক করতে gname storesearch ব্যবহার করা হয়েছে:
<div class="gcse-searchbox" data-gname="storesearch"></div>
<div class="gcse-searchresults" data-gname="storesearch"></div>

কোনও বস্তু পুনরুদ্ধার করার সময়, যদি একাধিক উপাদানের একই gname থাকে, তাহলে প্রোগ্রামেবল সার্চ ইঞ্জিন পৃষ্ঠার শেষ উপাদানটি ব্যবহার করবে।

 যেকোনো
autoSearchOnLoad বুলিয়ান লোড হচ্ছে এমন পৃষ্ঠার URL-এ এমবেড করা কোয়েরি দ্বারা অনুসন্ধান চালানো হবে কিনা তা নির্দিষ্ট করে। মনে রাখবেন যে স্বয়ংক্রিয় অনুসন্ধান চালানোর জন্য URL-এ একটি কোয়েরি স্ট্রিং উপস্থিত থাকতে হবে। ডিফল্ট: true । যেকোনো
enableHistory বুলিয়ান যদি true , তাহলে ব্রাউজারের ব্যাক এবং ফরোয়ার্ড বোতামগুলির জন্য ইতিহাস ব্যবস্থাপনা সক্ষম করে। একটি ডেমো দেখুন।

অনুসন্ধান বাক্স

শুধুমাত্র অনুসন্ধান বাক্স

queryParameterName স্ট্রিং কোয়েরি প্যারামিটারের নাম—উদাহরণস্বরূপ, q (ডিফল্ট) অথবা query । এটি URL-এ এমবেড করা হবে (উদাহরণস্বরূপ, http://www.example.com?q=lady+gaga)। মনে রাখবেন যে শুধুমাত্র কোয়েরি প্যারামিটারের নাম উল্লেখ করলে লোডের সময় অটো-সার্চ শুরু হয় না। অটো সার্চ চালানোর জন্য URL-এ একটি কোয়েরি স্ট্রিং উপস্থিত থাকতে হবে। যেকোনো
resultsUrl URL টি ফলাফল পৃষ্ঠার URL। (ডিফল্ট হিসেবে Google-হোস্ট করা পৃষ্ঠাটি ব্যবহার করা হয়।) শুধুমাত্র অনুসন্ধান বাক্স
newWindow বুলিয়ান ফলাফল পৃষ্ঠাটি নতুন উইন্ডোতে খুলবে কিনা তা নির্দিষ্ট করে। ডিফল্ট: false । শুধুমাত্র অনুসন্ধান বাক্স
ivt বুলিয়ান

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

true যখন এই প্যারামিটারটি উপস্থিত না থাকে অথবা আপনি এটি "true" তে সেট করেন, তখন আমরা একটি অবৈধ ট্র্যাফিক-অনলি কুকি সেট করব এবং শুধুমাত্র সম্মতিপ্রাপ্ত ট্র্যাফিকের উপর স্থানীয় স্টোরেজ ব্যবহার করব।

false যখন আপনি এই প্যারামিটারটি "false" তে সেট করবেন, তখন আমরা একটি অবৈধ ট্র্যাফিক-অনলি কুকি সেট করব এবং সম্মতিপ্রাপ্ত এবং অসম্মতিপ্রাপ্ত উভয় ট্র্যাফিকের জন্য স্থানীয় স্টোরেজ ব্যবহার করব।

ডিফল্ট: false

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-ivt="true"></div>

অনুসন্ধানের ফলাফল

শুধুমাত্র অনুসন্ধানের ফলাফল

mobileLayout স্ট্রিং

মোবাইল ডিভাইসের জন্য মোবাইল লেআউট স্টাইল ব্যবহার করা উচিত কিনা তা নির্দিষ্ট করে।

enabled শুধুমাত্র মোবাইল ডিভাইসের জন্য মোবাইল লেআউট ব্যবহার করে।

disabled কোনও ডিভাইসের জন্য মোবাইল লেআউট ব্যবহার করে না।

forced সকল ডিভাইসের জন্য মোবাইল লেআউট ব্যবহার করে।

ডিফল্ট: enabled

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-mobileLayout="disabled"></div>

 যেকোনো
স্বয়ংক্রিয়ভাবে সম্পন্ন করুন
enableAutoComplete বুলিয়ান প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে অটোকমপ্লিট সক্রিয় থাকলেই কেবল এটি উপলব্ধ। true অটোকমপ্লিট সক্ষম করে। যেকোনো
autoCompleteMaxCompletions পূর্ণসংখ্যা সর্বাধিক কতগুলি স্বয়ংক্রিয়ভাবে পূরণ করা যাবে তা দেখানো হবে।

অনুসন্ধান বাক্স

শুধুমাত্র অনুসন্ধান বাক্স

autoCompleteMaxPromotions পূর্ণসংখ্যা স্বয়ংক্রিয়ভাবে প্রদর্শিত প্রচারের সর্বাধিক সংখ্যা।

অনুসন্ধান বাক্স

শুধুমাত্র অনুসন্ধান বাক্স

autoCompleteValidLanguages স্ট্রিং যেসব ভাষার জন্য স্বয়ংক্রিয়পূর্ণতা সক্ষম করা উচিত, তার কমা দ্বারা পৃথক তালিকা। সমর্থিত ভাষা।

অনুসন্ধান বাক্স

শুধুমাত্র অনুসন্ধান বাক্স

পরিমার্জন
defaultToRefinement স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে যদি রিফাইনমেন্ট তৈরি করা হয়ে থাকে তবেই এটি উপলব্ধ। প্রদর্শনের জন্য ডিফল্ট রিফাইনমেন্ট লেবেল নির্দিষ্ট করে। দ্রষ্টব্য: এই বৈশিষ্ট্যটি Google হোস্টেড লেআউটের জন্য সমর্থিত নয়। যেকোনো
refinementStyle স্ট্রিং গ্রহণযোগ্য মানগুলি হল tab (ডিফল্ট) এবং link . link শুধুমাত্র তখনই সমর্থিত হবে যদি চিত্র অনুসন্ধান অক্ষম থাকে, অথবা যদি চিত্র অনুসন্ধান সক্ষম থাকে কিন্তু ওয়েব অনুসন্ধান অক্ষম থাকে।

অনুসন্ধানের ফলাফল

শুধুমাত্র অনুসন্ধানের ফলাফল

ছবি অনুসন্ধান
enableImageSearch বুলিয়ান প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

যদি true , তাহলে চিত্র অনুসন্ধান সক্ষম করে। চিত্রের ফলাফল একটি পৃথক ট্যাবে দেখানো হবে।

অনুসন্ধানের ফলাফল

শুধুমাত্র অনুসন্ধানের ফলাফল

defaultToImageSearch বুলিয়ান প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

যদি true , তাহলে অনুসন্ধান ফলাফল পৃষ্ঠাটি ডিফল্টরূপে চিত্র অনুসন্ধান ফলাফল প্রদর্শন করবে। ওয়েব ফলাফল একটি পৃথক ট্যাবে উপলব্ধ হবে।

 যেকোনো
imageSearchLayout স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

ছবি অনুসন্ধান ফলাফল পৃষ্ঠার লেআউট নির্দিষ্ট করে। গ্রহণযোগ্য মানগুলি হল classic , column , অথবা popup ।

অনুসন্ধানের ফলাফল

শুধুমাত্র অনুসন্ধানের ফলাফল

imageSearchResultSetSize পূর্ণসংখ্যা, স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

চিত্র অনুসন্ধানের জন্য সেট করা অনুসন্ধান ফলাফলের সর্বাধিক আকার নির্দিষ্ট করে। উদাহরণস্বরূপ, large , small , filtered_cse , 10 ।

 যেকোনো
image_as_filetype স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

একটি নির্দিষ্ট এক্সটেনশনের ফাইলগুলিতে ফলাফল সীমাবদ্ধ করে।

সমর্থিত এক্সটেনশনগুলি হল jpg , gif , png , bmp , svg , webp , ico , raw ।

যেকোনো

image_as_oq স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

লজিক্যাল OR ব্যবহার করে অনুসন্ধান ফলাফল ফিল্টার করুন।

"term1" অথবা "term2" সহ অনুসন্ধান ফলাফল চাইলে নমুনা ব্যবহারের পদ্ধতি: <div class="gcse-search" data-image_as_oq="term1 term2"></div>

যেকোনো

image_as_rights স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

লাইসেন্সিং ভিত্তিক ফিল্টার।

সমর্থিত মানগুলি হল cc_publicdomain , cc_attribute , cc_sharealike , cc_noncommercial , cc_nonderived , এবং এগুলির সমন্বয়।

সাধারণ সংমিশ্রণগুলি দেখুন।

যেকোনো

image_as_sitesearch স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

নির্দিষ্ট সাইটের পৃষ্ঠাগুলিতে ফলাফল সীমাবদ্ধ করুন।

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-image_as_sitesearch="example.com"></div>

যেকোনো

image_colortype স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

অনুসন্ধানকে কালো এবং সাদা (মনো), গ্রেস্কেল, অথবা রঙিন ছবিতে সীমাবদ্ধ করে। সমর্থিত মানগুলি হল mono , gray , color .

যেকোনো

image_cr স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

একটি নির্দিষ্ট দেশে উৎপন্ন নথির মধ্যে অনুসন্ধান ফলাফল সীমাবদ্ধ করে।

সমর্থিত মান

যেকোনো

image_dominantcolor স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

একটি নির্দিষ্ট প্রভাবশালী রঙের ছবি অনুসন্ধানে সীমাবদ্ধ করে। সমর্থিত মানগুলি হল red , orange , yellow , green , teal , blue , purple , pink , white , gray , black brown

যেকোনো

image_filter স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

অনুসন্ধান ফলাফলের স্বয়ংক্রিয় ফিল্টারিং ।

সমর্থিত মান: ০/১

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-image_filter="0"></div>

যেকোনো

image_gl স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ চালু থাকলেই কেবল এটি পাওয়া যাবে। যেসব দেশের উৎপত্তি প্যারামিটার মানের সাথে মেলে, সেই সার্চ ফলাফলগুলিকে বুস্ট করুন।

সমর্থিত মান

যেকোনো

image_size স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

একটি নির্দিষ্ট আকারের ছবি ফেরত পাঠায়, যেখানে আকার নিম্নলিখিতগুলির মধ্যে একটি হতে পারে: icon , small , medium , large , xlarge , xxlarge , অথবা huge.

যেকোনো

image_sort_by স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

তারিখ অথবা অন্যান্য কাঠামোগত বিষয়বস্তু ব্যবহার করে ফলাফল সাজান।

প্রাসঙ্গিকতা অনুসারে সাজানোর জন্য একটি খালি স্ট্রিং (image_sort_by="") ব্যবহার করুন।

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-image_sort_by="date"></div>

যেকোনো

image_type স্ট্রিং প্রোগ্রামেবল সার্চ ইঞ্জিন কন্ট্রোল প্যানেলে ইমেজ সার্চ সক্ষম করা থাকলেই কেবল এটি উপলব্ধ।

নির্দিষ্ট ধরণের ছবিতে অনুসন্ধান সীমাবদ্ধ করে। সমর্থিত মানগুলি হল clipart (ক্লিপ আর্ট), face (মানুষের মুখ), lineart (রেখা অঙ্কন), stock (স্টক ফটো), photo (ছবি), এবং animated (অ্যানিমেটেড জিআইএফ)।

যেকোনো

ওয়েব অনুসন্ধান
disableWebSearch বুলিয়ান যদি true , তাহলে ওয়েব অনুসন্ধান অক্ষম করে। সাধারণত শুধুমাত্র তখনই ব্যবহৃত হয় যখন প্রোগ্রামেবল অনুসন্ধান ইঞ্জিন নিয়ন্ত্রণ প্যানেলে চিত্র অনুসন্ধান সক্ষম করা থাকে।

অনুসন্ধানের ফলাফল

শুধুমাত্র অনুসন্ধানের ফলাফল

webSearchQueryAddition স্ট্রিং লজিক্যাল OR ব্যবহার করে অনুসন্ধান কোয়েরিতে অতিরিক্ত শব্দ যোগ করা হয়েছে।

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-webSearchQueryAddition="term1 term2"></div>

 যেকোনো
webSearchResultSetSize পূর্ণসংখ্যা, স্ট্রিং ফলাফল সেটের সর্বোচ্চ আকার। চিত্র অনুসন্ধান এবং ওয়েব অনুসন্ধান উভয়ের ক্ষেত্রেই প্রযোজ্য। ডিফল্ট মান লেআউটের উপর এবং প্রোগ্রামেবল সার্চ ইঞ্জিনটি পুরো ওয়েবে অনুসন্ধান করার জন্য কনফিগার করা আছে কিনা, নাকি শুধুমাত্র নির্দিষ্ট সাইটগুলিতে অনুসন্ধান করার জন্য কনফিগার করা আছে তার উপর নির্ভর করে। গ্রহণযোগ্য মানগুলির মধ্যে রয়েছে:
  • ১-২০ পর্যন্ত একটি পূর্ণসংখ্যা
  • small : একটি ছোট ফলাফল সেটের অনুরোধ করে, সাধারণত প্রতি পৃষ্ঠায় 4টি ফলাফল।
  • large : একটি বৃহৎ ফলাফল সেটের অনুরোধ করে, সাধারণত প্রতি পৃষ্ঠায় 8টি ফলাফল।
  • filtered_cse : প্রতি পৃষ্ঠায় সর্বোচ্চ ১০টি ফলাফলের অনুরোধ করে, সর্বোচ্চ ১০টি পৃষ্ঠা বা ১০০টি ফলাফলের জন্য।
 যেকোনো
webSearchSafesearch স্ট্রিং ওয়েবসার্চ ফলাফলের জন্য নিরাপদ অনুসন্ধান সক্ষম কিনা তা নির্দিষ্ট করে। গৃহীত মানগুলি off এবং active । যেকোনো
as_filetype স্ট্রিং নির্দিষ্ট এক্সটেনশনের ফাইলগুলিতে ফলাফল সীমাবদ্ধ করে। Google দ্বারা সূচীযোগ্য ফাইল প্রকারের একটি তালিকা Search Console সহায়তা কেন্দ্রে পাওয়া যাবে।

যেকোনো

as_oq স্ট্রিং লজিক্যাল OR ব্যবহার করে অনুসন্ধান ফলাফল ফিল্টার করুন।

"term1" অথবা "term2" সহ অনুসন্ধান ফলাফল চাইলে নমুনা ব্যবহারের পদ্ধতি: <div class="gcse-search" data-as_oq="term1 term2"></div>

 যেকোনো
as_rights স্ট্রিং লাইসেন্সিং ভিত্তিক ফিল্টার।

সমর্থিত মানগুলি হল cc_publicdomain , cc_attribute , cc_sharealike , cc_noncommercial , cc_nonderived , এবং এগুলির সমন্বয়।

সাধারণ সংমিশ্রণের জন্য https://wiki.creativecommons.org/wiki/CC_Search_integration দেখুন।

যেকোনো

as_sitesearch স্ট্রিং নির্দিষ্ট সাইটের পৃষ্ঠাগুলিতে ফলাফল সীমাবদ্ধ করুন।

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-as_sitesearch="example.com"></div>

 যেকোনো
cr স্ট্রিং একটি নির্দিষ্ট দেশে উৎপন্ন নথির মধ্যে অনুসন্ধান ফলাফল সীমাবদ্ধ করে।

সমর্থিত মান

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-cr="countryFR"></div>

 যেকোনো
filter স্ট্রিং অনুসন্ধান ফলাফলের স্বয়ংক্রিয় ফিল্টারিং ।

সমর্থিত মান: ০/১

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-filter="0"></div>

 যেকোনো
gl স্ট্রিং যেসব দেশের উৎপত্তিস্থল প্যারামিটার মানের সাথে মেলে, সেইসব সার্চ ফলাফল বুস্ট করুন।

এটি শুধুমাত্র ভাষা মান সেটিং এর সাথে একত্রে কাজ করবে।

সমর্থিত মান

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-gl="fr"></div>

 যেকোনো
lr স্ট্রিং অনুসন্ধানের ফলাফলগুলিকে একটি নির্দিষ্ট ভাষায় লেখা নথিতে সীমাবদ্ধ করে।

সমর্থিত মান

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-lr="lang_fr"></div>

 যেকোনো
sort_by স্ট্রিং তারিখ অথবা অন্যান্য কাঠামোগত বিষয়বস্তু ব্যবহার করে ফলাফল বাছাই করুন। অ্যাট্রিবিউট মান অবশ্যই প্রোগ্রামেবল সার্চ ইজিনাইনের ফলাফল বাছাই সেটিংসে প্রদত্ত বিকল্পগুলির মধ্যে একটি হতে হবে।

প্রাসঙ্গিকতা অনুসারে সাজানোর জন্য একটি খালি স্ট্রিং (sort_by="") ব্যবহার করুন।

নমুনা ব্যবহারের ধরণ: <div class="gcse-search" data-sort_by="date"></div>

 যেকোনো
অনুসন্ধানের ফলাফল
enableOrderBy বুলিয়ান প্রাসঙ্গিকতা, তারিখ, বা লেবেল অনুসারে ফলাফল সাজানো সক্ষম করে। যেকোনো
linkTarget স্ট্রিং লিঙ্ক টার্গেট সেট করে। ডিফল্ট: _blank ।

অনুসন্ধানের ফলাফল

শুধুমাত্র অনুসন্ধানের ফলাফল

noResultsString স্ট্রিং যখন কোনও ফলাফল কোয়েরির সাথে মেলে না তখন ডিফল্ট টেক্সটটি প্রদর্শনের জন্য নির্দিষ্ট করে। ডিফল্ট ফলাফল স্ট্রিংটি সমস্ত সমর্থিত ভাষায় স্থানীয় স্ট্রিং প্রদর্শনের জন্য ব্যবহার করা যেতে পারে, যখন কাস্টমাইজডটি তা করে না।

অনুসন্ধানের ফলাফল

শুধুমাত্র অনুসন্ধানের ফলাফল

resultSetSize পূর্ণসংখ্যা, স্ট্রিং ফলাফল সেটের সর্বোচ্চ আকার। উদাহরণস্বরূপ, large , small , filtered_cse , 10 ডিফল্ট লেআউট এবং ইঞ্জিনটি পুরো ওয়েবে অনুসন্ধান করার জন্য কনফিগার করা আছে কিনা, নাকি শুধুমাত্র নির্দিষ্ট সাইটগুলিতে অনুসন্ধান করার জন্য কনফিগার করা আছে তার উপর নির্ভর করে। যেকোনো
safeSearch স্ট্রিং ওয়েব এবং ছবি উভয় অনুসন্ধানের জন্য নিরাপদ অনুসন্ধান সক্ষম কিনা তা নির্দিষ্ট করে। গৃহীত মানগুলি off এবং active । যেকোনো

কলব্যাক

কলব্যাক সিকোয়েন্স ডায়াগ্রাম
সার্চ এলিমেন্ট জাভাস্ক্রিপ্ট থেকে কলব্যাকের সিকোয়েন্স ডায়াগ্রাম

কলব্যাকগুলি অনুসন্ধান-উপাদানের প্রাথমিককরণ এবং অনুসন্ধান প্রক্রিয়াগুলির বিস্তারিত নিয়ন্ত্রণ সমর্থন করে। এগুলি বিশ্বব্যাপী __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-এ Search Element JavaScript সার্চ এলিমেন্ট রেন্ডার করার আগে initialization callback চালু করা হয়। যদি __gcse তে parsetags explicit এ সেট করা থাকে, তাহলে Search Element JavaScript রেন্ডারিং Search Elements কে initialization callback-এ ছেড়ে দেয় (যেমন Register Callbacks তে দেখানো হয়েছে)। এটি রেন্ডার করার জন্য উপাদান নির্বাচন করতে, অথবা প্রয়োজন না হওয়া পর্যন্ত রেন্ডারিং এলিমেন্ট স্থগিত করতে ব্যবহার করা যেতে পারে। এটি উপাদানগুলির বৈশিষ্ট্যগুলিকে ওভাররাইড করতে পারে; উদাহরণস্বরূপ, এটি Control Panel বা HTML বৈশিষ্ট্যের মাধ্যমে কনফিগার করা একটি সার্চবক্সকে ওয়েব অনুসন্ধানের জন্য ডিফল্টে একটি চিত্র অনুসন্ধান বাক্সে রূপান্তর করতে পারে, অথবা নির্দিষ্ট করতে পারে যে একটি Programmable Search Engine ফর্মের মাধ্যমে জমা দেওয়া প্রশ্নগুলি একটি searchresults-only উপাদানে কার্যকর করা হয়। একটি ডেমো দেখুন।

ইনিশিয়ালাইজেশন কলব্যাকের ভূমিকা __gcse এর parsetags প্রোপার্টির মান দ্বারা নিয়ন্ত্রিত হয়।

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

নিচের কোডটি দেখায় কিভাবে একটি div তে explicit parsetag এবং initialization কলব্যাক ব্যবহার করে একটি সার্চ বক্স, সার্চ ফলাফল সহ, রেন্ডার করতে হয়:

ইনিশিয়ালাইজেশন কলব্যাকের উদাহরণ

আমাদের একটি <div> অন্তর্ভুক্ত করতে হবে যেখানে একটি id মান থাকবে যেখানে আমরা Search Element কোড চাই:

    <div id="test"></div>
<div> এর পরে এই জাভাস্ক্রিপ্টটি যোগ করুন। মনে রাখবেন এটি test উল্লেখ করে, যে id আমরা <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
};

অনুসন্ধান উপাদান লোড করা শুরু করতে এই HTML টি অন্তর্ভুক্ত করুন। src ধারায় cx মানটি আপনার নিজস্ব cx দিয়ে প্রতিস্থাপন করুন।

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

যদি HTML gname সনাক্ত না করে, তাহলে Search Element JavaScript একটি মান তৈরি করে যা HTML পরিবর্তন না হওয়া পর্যন্ত সামঞ্জস্যপূর্ণ থাকবে।

ছবি/ওয়েব অনুসন্ধান-কলব্যাক শুরু হচ্ছে

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

searchStartingCallback(gname, query)
gname
এলিমেন্টের শনাক্তকারী স্ট্রিং অনুসন্ধান করুন
query
ব্যবহারকারীর দ্বারা প্রবেশ করানো মান (সম্ভবত অনুসন্ধান উপাদান জাভাস্ক্রিপ্ট দ্বারা পরিবর্তিত।)

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

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

window.__gcse['searchCallbacks']['web']['starting'] = function(gname, query) {...};
উদাহরণ অনুসন্ধান কলব্যাক শুরু করা

Example Search Starting Callback-এ উদাহরণ অনুসন্ধান শুরু কলব্যাক দিনের সময়ের উপর নির্ভর করে কোয়েরিতে 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 div DOM-এ অবস্থিত যেখানে Search Element সাধারণত প্রচার এবং অনুসন্ধান ফলাফল স্থাপন করে। সাধারণত, Search Element JavaScript এই div পূরণ করতে পারে, কিন্তু এই কলব্যাক ফলাফলের স্বয়ংক্রিয় রেন্ডারিং বন্ধ করতে পারে এবং ফলাফল নিজেই রেন্ডার করতে এই div ব্যবহার করতে পারে।

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

ফলাফল প্রস্তুত কলব্যাকের উদাহরণ

Example resultsReady Ready Callback-এ example 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 = {});
    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>

সার্চ শুরুর কলব্যাকের মতো, উপরেরটি __gcse অবজেক্টে কলব্যাক রাখার অনেক উপায়ের মধ্যে একটি।

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

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

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

callback(gname, query, promoElts, resultElts);
gname
এলিমেন্টের শনাক্তকারী স্ট্রিং অনুসন্ধান করুন
query
অনুসন্ধান স্ট্রিং।
promoElts
DOM উপাদানগুলির একটি অ্যারে যেখানে প্রচার রয়েছে।
resultElts
ফলাফল ধারণকারী DOM উপাদানের একটি অ্যারে।

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

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

Example Results Rendered Callback-এ উদাহরণ 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 = {});
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};
};
 __gcse সেট আপ করার সময় এই কোডটি ব্যবহার করে এই কলব্যাকটি ইনস্টল করুন: 
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>
রেন্ডার করা কলব্যাকের ফলাফলের উদাহরণ: নতুন ট্যাব/উইন্ডোতে নির্দিষ্ট ধরণের ফাইল খোলা

নিচের কলব্যাক উদাহরণটি অনুসন্ধান ফলাফলের লিঙ্কগুলিকে বর্তমান উইন্ডোর পরিবর্তে একটি নতুন ট্যাব/পৃষ্ঠায় একটি নির্দিষ্ট ফাইল খোলার জন্য রেন্ডার করার পরে পরিবর্তন করতে পারে (উদাহরণস্বরূপ: PDF, Excel বা Word)। ব্যবহারকারীরা যখন একই উইন্ডোতে একটি ফাইল খুলতে এবং ফলাফল পৃষ্ঠা থেকে দূরে সরে যেতে চান না তখন এটি ব্রাউজিং অভিজ্ঞতা উন্নত করে।

এই কলব্যাক উদাহরণটি অনুসন্ধান ফলাফলে PDF লিঙ্কগুলি সনাক্ত করে এবং PDF লিঙ্কগুলিতে target="_blank" অ্যাট্রিবিউট সেট করে যাতে সেগুলি একটি নতুন ট্যাবে খুলতে পারে। পৃষ্ঠা আপডেট হলে নতুন ফলাফলগুলি গতিশীলভাবে পরিচালনা করার জন্য একটি MutationObserver ব্যবহার করা হয়। দ্রষ্টব্য: আপনি আপনার প্রয়োজন অনুসারে handleSearchResults এ .pdf অন্য যেকোনো ফাইল টাইপ দিয়ে প্রতিস্থাপন করতে পারেন।

এই কলব্যাক উদাহরণটি গুগল হোস্টেড এবং ওভারলে লেআউটে কাজ করে না।

নতুন ট্যাব/উইন্ডোতে নির্দিষ্ট ধরণের ফাইল খোলা হচ্ছে 
function handleSearchResults() {
  const links = document.querySelectorAll('.gsc-results .gs-title');
  links.forEach(link => {
    const url = link.href;
    if (url?.toLowerCase().endsWith('.pdf')) {
      link.setAttribute('target', '_blank');
    }
  });
}

const myWebResultsRenderedCallback = () => {
  // Call handleSearchResults when results are rendered
  handleSearchResults();
  // Set up a MutationObserver to handle subsequent updates to the results
  const observer = new MutationObserver(handleSearchResults);
  const searchResultsContainer = document.querySelector('.gsc-results');
  if (searchResultsContainer) {
    observer.observe(searchResultsContainer, {
      childList: true,
      subtree: true
    });
  } else {
    console.log('No Results.');
  }
};

এই কলব্যাকটি window.__gcse: 

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>

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

আরও কলব্যাক উদাহরণগুলি More Callback Examples ডকুমেন্টে পাওয়া যাবে।

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

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 অবজেক্ট নিম্নলিখিত স্ট্যাটিক ফাংশন প্রকাশ করে:

ফাংশন বিবরণ
.render(componentConfig, opt_componentConfig) একটি অনুসন্ধান উপাদান রেন্ডার করে।

পরামিতি

নাম বিবরণ
componentConfig একটি প্রোগ্রামেবল সার্চ এলিমেন্ট কম্পোনেন্টের কনফিগারেশন। নিম্নলিখিতগুলি নির্দিষ্ট করে:
  • div (string|Element): <div> অথবা div এলিমেন্টের id যেখানে প্রোগ্রামেবল সার্চ এলিমেন্ট রেন্ডার করা হবে।
  • tag (স্ট্রিং): রেন্ডার করা উপাদানের ধরণ। (যখন opt_componentConfig সরবরাহ করা হয়, তখন tag অ্যাট্রিবিউটের মান অবশ্যই searchbox হতে হবে।) অনুমোদিত মানগুলি হল:
    • search : একটি অনুসন্ধান বাক্স এবং অনুসন্ধান ফলাফল, একসাথে প্রদর্শিত হয়।
    • searchbox : একটি প্রোগ্রামেবল সার্চ এলিমেন্টের একটি সার্চ বক্স উপাদান।
    • searchbox-only : একটি স্বতন্ত্র অনুসন্ধান বাক্স, যা দুই-কলাম লেআউটে opt_componentConfig দ্বারা নির্দিষ্ট অনুসন্ধান ফলাফলের একটি ব্লকের সাথে যুক্ত করা হবে।
    • searchresults-only : অনুসন্ধান ফলাফলের একটি স্বতন্ত্র ব্লক। অনুসন্ধানগুলি একটি URL-এ এমবেড করা একটি কোয়েরি প্যারামিটার দ্বারা বা প্রোগ্রাম্যাটিক এক্সিকিউশন দ্বারা ট্রিগার করা হয়।
  • gname (স্ট্রিং): (ঐচ্ছিক) এই উপাদানের জন্য একটি অনন্য নাম। যদি সরবরাহ না করা হয়, তাহলে প্রোগ্রামেবল সার্চ ইঞ্জিন স্বয়ংক্রিয়ভাবে একটি gname তৈরি করবে।
  • attributes (বস্তু): একটি key:value জোড়া আকারে ঐচ্ছিক বৈশিষ্ট্য। সমর্থিত বৈশিষ্ট্য।
opt_componentConfig ঐচ্ছিক। দ্বিতীয় কম্পোনেন্ট কনফিগারেশন আর্গুমেন্ট। searchresults কম্পোনেন্ট প্রদানের জন্য TWO_COLUMN মোডে ব্যবহৃত হয়। নিম্নলিখিতগুলি নির্দিষ্ট করে:
  • div (স্ট্রিং): <div> অথবা যে div এলিমেন্টে এলিমেন্টটি রেন্ডার করা হবে তার id ।
  • tag (স্ট্রিং): রেন্ডার করা কম্পোনেন্টের ধরণ। যখন opt_componentConfig সরবরাহ করা হয়, তখন tag অ্যাট্রিবিউটের মান searchresults হতে হবে। এছাড়াও, componentConfig এর tag অ্যাট্রিবিউটের মান searchbox হতে হবে।
  • gname (স্ট্রিং): (ঐচ্ছিক) এই কম্পোনেন্টের জন্য একটি অনন্য নাম। যদি সরবরাহ না করা হয়, তাহলে প্রোগ্রামেবল সার্চ ইঞ্জিন স্বয়ংক্রিয়ভাবে এই কম্পোনেন্টের জন্য একটি gname তৈরি করবে। যদি সরবরাহ করা হয়, তাহলে এটি অবশ্যই componentConfig এর gname সাথে মিলবে।
  • attributes (বস্তু): একটি key:value জোড়া আকারে ঐচ্ছিক বৈশিষ্ট্য। সমর্থিত বৈশিষ্ট্য।
.go(opt_container) নির্দিষ্ট কন্টেইনারে সমস্ত অনুসন্ধান উপাদান ট্যাগ/ক্লাস রেন্ডার করে।

পরামিতি

নাম বিবরণ
opt_container রেন্ডার করার জন্য সার্চ এলিমেন্ট উপাদান ধারণকারী কন্টেইনার। কন্টেইনারের (স্ট্রিং) আইডি অথবা এলিমেন্ট নিজেই উল্লেখ করুন। বাদ দিলে, পৃষ্ঠার body ট্যাগের ভিতরে থাকা সমস্ত প্রোগ্রামেবল সার্চ এলিমেন্ট উপাদান রেন্ডার করা হবে।
.getElement(gname) gname ব্যবহার করে এলিমেন্ট অবজেক্টটি পায়। যদি না পাওয়া যায়, তাহলে null ফিরিয়ে আনুন।

ফিরে আসা element অবজেক্টের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

  • gname : উপাদান বস্তুর নাম। যদি সরবরাহ না করা হয়, তাহলে প্রোগ্রামেবল সার্চ ইঞ্জিন স্বয়ংক্রিয়ভাবে বস্তুর জন্য একটি gname তৈরি করবে। আরও তথ্য।
  • type : উপাদানের ধরণ।
  • uiOptions : উপাদানটি রেন্ডার করতে ব্যবহৃত চূড়ান্ত বৈশিষ্ট্য।
  • execute - function(string): একটি প্রোগ্রাম্যাটিক কোয়েরি কার্যকর করে।
  • prefillQuery - function(string): কোয়েরিটি কার্যকর না করেই সার্চবক্সে একটি কোয়েরি স্ট্রিং প্রিফিল করে।
  • getInputQuery - ফাংশন(): ইনপুট বাক্সে প্রদর্শিত বর্তমান মান পায়।
  • clearAllResults - function(): সার্চ বক্স ছাড়া সবকিছু লুকিয়ে রেখে নিয়ন্ত্রণ মুছে ফেলে, যদি থাকে।

নিম্নলিখিত কোডটি "element1" অনুসন্ধান উপাদানে "news" কোয়েরিটি কার্যকর করে: 

var element = google.search.cse.element.getElement('element1');
            element.execute('news');
.getAllElements() gname দ্বারা keyed, সফলভাবে তৈরি সকল এলিমেন্ট অবজেক্টের একটি মানচিত্র প্রদান করে।