অনুসন্ধান উইজেট দিয়ে একটি অনুসন্ধান ইন্টারফেস তৈরি করুন

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

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

একটি অনুসন্ধান ইন্টারফেস তৈরি করুন

অনুসন্ধান ইন্টারফেস তৈরি করতে বেশ কয়েকটি ধাপ প্রয়োজন:

  1. একটি অনুসন্ধান অ্যাপ্লিকেশন কনফিগার করুন
  2. অ্যাপ্লিকেশনটির জন্য একটি ক্লায়েন্ট আইডি তৈরি করুন
  3. অনুসন্ধান বাক্স এবং ফলাফলের জন্য HTML মার্কআপ যোগ করুন
  4. পৃষ্ঠায় উইজেটটি লোড করুন
  5. উইজেটটি আরম্ভ করুন

একটি অনুসন্ধান অ্যাপ্লিকেশন কনফিগার করুন

প্রতিটি অনুসন্ধান ইন্টারফেসে অ্যাডমিন কনসোলে একটি অনুসন্ধান অ্যাপ্লিকেশন সংজ্ঞায়িত থাকতে হবে। অনুসন্ধান অ্যাপ্লিকেশনটি অনুসন্ধানের জন্য অতিরিক্ত তথ্য প্রদান করে, যেমন ডেটা উৎস, দিক এবং অনুসন্ধানের মান সেটিংস।

একটি অনুসন্ধান অ্যাপ্লিকেশন তৈরি করতে, একটি কাস্টম অনুসন্ধান অভিজ্ঞতা তৈরি করুন দেখুন।

অ্যাপ্লিকেশনটির জন্য একটি ক্লায়েন্ট আইডি তৈরি করুন

গুগল ক্লাউড সার্চ এপিআই-তে অ্যাক্সেস কনফিগার করার ধাপগুলি ছাড়াও, আপনাকে ওয়েব অ্যাপ্লিকেশনের জন্য একটি ক্লায়েন্ট আইডি তৈরি করতে হবে।

একটি প্রকল্প কনফিগার করুন

যখন আপনি প্রকল্পটি কনফিগার করবেন:

  • ওয়েব ব্রাউজার ক্লায়েন্টের ধরণ নির্বাচন করুন
  • আপনার অ্যাপের মূল URI প্রদান করুন।
  • তৈরি করা ক্লায়েন্ট আইডির নোট। পরবর্তী ধাপগুলি সম্পন্ন করার জন্য আপনার ক্লায়েন্ট আইডির প্রয়োজন হবে। উইজেটের জন্য ক্লায়েন্ট সিক্রেটের প্রয়োজন নেই।

অতিরিক্ত তথ্যের জন্য, ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশনের জন্য OAuth 2.0 দেখুন।

HTML মার্কআপ যোগ করুন

উইজেটটি কাজ করার জন্য অল্প পরিমাণে HTML প্রয়োজন। আপনাকে অবশ্যই প্রদান করতে হবে:

  • অনুসন্ধান বাক্সের জন্য একটি input উপাদান।
  • সাজেশন পপআপ অ্যাঙ্কর করার জন্য একটি উপাদান।
  • অনুসন্ধানের ফলাফল ধারণ করার জন্য একটি উপাদান।
  • (ঐচ্ছিক) ফ্যাসেট নিয়ন্ত্রণগুলি ধারণ করার জন্য একটি উপাদান প্রদান করুন।

নিম্নলিখিত HTML স্নিপেটটি একটি অনুসন্ধান উইজেটের HTML দেখায়, যেখানে আবদ্ধ করার জন্য উপাদানগুলি তাদের id বৈশিষ্ট্য দ্বারা চিহ্নিত করা হয়:

পরিবেশন/উইজেট/পাবলিক/with_css/index.html
<div id="search_bar">
  <div id="suggestions_anchor">
    <input type="text" id="search_input" placeholder="Search for...">
  </div>
</div>
<div id="facet_results"></div>
<div id="search_results"></div>

উইজেটটি লোড করুন

উইজেটটি একটি লোডার স্ক্রিপ্টের মাধ্যমে গতিশীলভাবে লোড করা হয়। লোডারটি অন্তর্ভুক্ত করতে, দেখানো হিসাবে <script> ট্যাগটি ব্যবহার করুন:

পরিবেশন/উইজেট/পাবলিক/with_css/index.html
<!-- Google API loader -->
<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

স্ক্রিপ্ট ট্যাগে আপনাকে একটি onload কলব্যাক প্রদান করতে হবে। লোডার প্রস্তুত হলে ফাংশনটি কল করা হয়। লোডার প্রস্তুত হলে, API ক্লায়েন্ট, Google সাইন-ইন এবং ক্লাউড অনুসন্ধান মডিউল লোড করতে gapi.load() কল করে উইজেটটি লোড করা চালিয়ে যান।

পরিবেশন/উইজেট/পাবলিক/with_css/app.js
/**
* Load the cloud search widget & auth libraries. Runs after
* the initial gapi bootstrap library is ready.
*/
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

সমস্ত মডিউল লোড হওয়ার পরে initializeApp() ফাংশনটি কল করা হয়।

উইজেটটি আরম্ভ করুন

প্রথমে, আপনার তৈরি করা ক্লায়েন্ট আইডি এবং https://www.googleapis.com/auth/cloud_search.query স্কোপ ব্যবহার করে gapi.client.init() অথবা gapi.auth2.init() কল করে ক্লায়েন্ট লাইব্রেরিটি ইনিশিয়ালাইজ করুন। এরপর, উইজেটটি কনফিগার করতে এবং এটিকে আপনার HTML উপাদানের সাথে সংযুক্ত করতে gapi.cloudsearch.widget.resultscontainer.Builder এবং gapi.cloudsearch.widget.searchbox.Builder ক্লাস ব্যবহার করুন।

নিম্নলিখিত উদাহরণে উইজেটটি কীভাবে শুরু করবেন তা দেখানো হয়েছে:

পরিবেশন/উইজেট/পাবলিক/with_css/app.js
/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
function initializeApp() {
  // Load client ID & search app.
  loadConfiguration().then(function() {
    // Set API version to v1.
    gapi.config.update('cloudsearch.config/apiVersion', 'v1');

    // Build the result container and bind to DOM elements.
    var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
      .setSearchApplicationId(searchApplicationName)
      .setSearchResultsContainerElement(document.getElementById('search_results'))
      .setFacetResultsContainerElement(document.getElementById('facet_results'))
      .build();

    // Build the search box and bind to DOM elements.
    var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
      .setSearchApplicationId(searchApplicationName)
      .setInput(document.getElementById('search_input'))
      .setAnchor(document.getElementById('suggestions_anchor'))
      .setResultsContainer(resultsContainer)
      .build();
  }).then(function() {
    // Init API/oauth client w/client ID.
    return gapi.auth2.init({
        'clientId': clientId,
        'scope': 'https://www.googleapis.com/auth/cloud_search.query'
    });
  });
}

উপরের উদাহরণে কনফিগারেশনের জন্য দুটি ভেরিয়েবল উল্লেখ করা হয়েছে যা নিম্নরূপ:

পরিবেশন/উইজেট/পাবলিক/with_css/app.js
/**
* Client ID from OAuth credentials.
*/
var clientId = "...apps.googleusercontent.com";

/**
* Full resource name of the search application, such as
* "searchapplications/<your-id>".
*/
var searchApplicationName = "searchapplications/...";

সাইন-ইন অভিজ্ঞতা কাস্টমাইজ করুন

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

ব্যবহারকারীদের সরাসরি অনুমোদন দিন

ব্যবহারকারীর সাইন-ইন অবস্থা পর্যবেক্ষণ করতে এবং প্রয়োজনে ব্যবহারকারীদের সাইন-ইন বা সাইন-আউট করতে Sign In With Google ব্যবহার করুন। উদাহরণস্বরূপ, নিম্নলিখিত উদাহরণটি সাইন-ইন পরিবর্তনগুলি পর্যবেক্ষণ করতে isSignedIn অবস্থা পর্যবেক্ষণ করে এবং একটি বোতাম ক্লিক থেকে সাইন-ইন শুরু করতে GoogleAuth.signIn() পদ্ধতি ব্যবহার করে:

সার্ভিং/উইজেট/পাবলিক/উইথ_সাইনইন/অ্যাপ.জেএস
// Handle sign-in/sign-out.
let auth = gapi.auth2.getAuthInstance();

// Watch for sign in status changes to update the UI appropriately.
let onSignInChanged = (isSignedIn) => {
  // Update UI to switch between signed in/out states
  // ...
}
auth.isSignedIn.listen(onSignInChanged);
onSignInChanged(auth.isSignedIn.get()); // Trigger with current status.

// Connect sign-in/sign-out buttons.
document.getElementById("sign-in").onclick = function(e) {
  auth.signIn();
};
document.getElementById("sign-out").onclick = function(e) {
  auth.signOut();
};

আরও তথ্যের জন্য, Google দিয়ে সাইন-ইন দেখুন।

ব্যবহারকারীদের স্বয়ংক্রিয়ভাবে সাইন-ইন করুন

আপনার প্রতিষ্ঠানের ব্যবহারকারীদের পক্ষ থেকে অ্যাপ্লিকেশনটিকে প্রাক-অনুমোদিত করে আপনি সাইন-ইন অভিজ্ঞতাকে আরও সহজ করতে পারেন। অ্যাপ্লিকেশনটি সুরক্ষিত করার জন্য ক্লাউড আইডেন্টিটি অ্যাওয়্যার প্রক্সি ব্যবহার করলেও এই কৌশলটি কার্যকর।

আরও তথ্যের জন্য, আইটি অ্যাপস দিয়ে গুগল সাইন-ইন ব্যবহার করুন দেখুন।

ইন্টারফেসটি কাস্টমাইজ করুন

আপনি কৌশলগুলির সংমিশ্রণের মাধ্যমে অনুসন্ধান ইন্টারফেসের চেহারা পরিবর্তন করতে পারেন:

  • CSS দিয়ে স্টাইলগুলি ওভাররাইড করুন
  • একটি অ্যাডাপ্টার দিয়ে উপাদানগুলি সাজান।
  • একটি অ্যাডাপ্টার দিয়ে কাস্টম উপাদান তৈরি করুন

CSS দিয়ে স্টাইলগুলি ওভাররাইড করুন

সার্চ উইজেটটিতে নিজস্ব CSS-টু-স্টাইল সাজেশন এবং ফলাফল উপাদানের পাশাপাশি পৃষ্ঠাকরণ নিয়ন্ত্রণও রয়েছে। আপনি প্রয়োজন অনুসারে এই উপাদানগুলিকে পুনরায় স্টাইল করতে পারেন।

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

উদাহরণস্বরূপ, ডকুমেন্টের স্ট্যাটিক link বা style ট্যাগে লোড করা হলে নিম্নলিখিত নিয়মটির কোনও প্রভাব থাকবে না।

.cloudsearch_suggestion_container {
  font-size: 14px;
}

পরিবর্তে, পৃষ্ঠায় ঘোষিত পূর্বপুরুষ কন্টেইনারের আইডি বা ক্লাস দিয়ে নিয়মটি যোগ্যতা অর্জন করুন।

#suggestions_anchor .cloudsearch_suggestion_container {
  font-size: 14px;
}

উইজেট দ্বারা উত্পাদিত সাপোর্ট ক্লাসের তালিকা এবং HTML এর উদাহরণের জন্য, সাপোর্টেড CSS ক্লাসের রেফারেন্স দেখুন।

একটি অ্যাডাপ্টার দিয়ে উপাদানগুলি সাজান।

রেন্ডারিংয়ের আগে কোনও উপাদান সাজানোর জন্য, এমন একটি অ্যাডাপ্টার তৈরি করুন এবং পুনরায় সেট করুন যা সাজসজ্জার পদ্ধতিগুলির মধ্যে একটি প্রয়োগ করে যেমন decorateSuggestionElement বা decorateSearchResultElement.

উদাহরণস্বরূপ, নিম্নলিখিত অ্যাডাপ্টারগুলি পরামর্শ এবং ফলাফল উপাদানগুলিতে একটি কাস্টম ক্লাস যুক্ত করে।

পরিবেশন/উইজেট/পাবলিক/with_decorated_element/app.js
/**
 * Search box adapter that decorates suggestion elements by
 * adding a custom CSS class.
 */
function SearchBoxAdapter() {}
SearchBoxAdapter.prototype.decorateSuggestionElement = function(element) {
  element.classList.add('my-suggestion');
}

/**
 * Results container adapter that decorates suggestion elements by
 * adding a custom CSS class.
 */
function ResultsContainerAdapter() {}
ResultsContainerAdapter.prototype.decorateSearchResultElement = function(element) {
  element.classList.add('my-result');
}

উইজেটটি শুরু করার সময় অ্যাডাপ্টারটি নিবন্ধন করতে, সংশ্লিষ্ট Builder ক্লাসের setAdapter() পদ্ধতিটি ব্যবহার করুন:

পরিবেশন/উইজেট/পাবলিক/with_decorated_element/app.js
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(new ResultsContainerAdapter())
  // ...
  .build();

// Build the search box and bind to DOM elements.
var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setAdapter(new SearchBoxAdapter())
  // ...
  .build();

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

একটি অ্যাডাপ্টার দিয়ে কাস্টম উপাদান তৈরি করুন

একটি সাজেশন, ফ্যাসেট কন্টেইনার, অথবা সার্চ রেজাল্টের জন্য একটি কাস্টম এলিমেন্ট তৈরি করতে, এমন একটি অ্যাডাপ্টার তৈরি এবং নিবন্ধন করুন যা প্রতিনিয়ত createSuggestionElement , createFacetResultElement , অথবা createSearchResultElement প্রয়োগ করে।

নিম্নলিখিত অ্যাডাপ্টারগুলি HTML <template> ট্যাগ ব্যবহার করে কাস্টম সাজেশন এবং অনুসন্ধান ফলাফল উপাদান তৈরি করার চিত্র তুলে ধরে।

পরিবেশন/উইজেট/পাবলিক/উইথ_কাস্টম_এলিমেন্ট/অ্যাপ.জেএস
/**
 * Search box adapter that overrides creation of suggestion elements.
 */
function SearchBoxAdapter() {}
SearchBoxAdapter.prototype.createSuggestionElement = function(suggestion) {
  let template = document.querySelector('#suggestion_template');
  let fragment = document.importNode(template.content, true);
  fragment.querySelector('.suggested_query').textContent = suggestion.suggestedQuery;
  return fragment.firstElementChild;
}

/**
 * Results container adapter that overrides creation of result elements.
 */
function ResultsContainerAdapter() {}
ResultsContainerAdapter.prototype.createSearchResultElement = function(result) {
  let template = document.querySelector('#result_template');
  let fragment = document.importNode(template.content, true);
  fragment.querySelector('.title').textContent = result.title;
  fragment.querySelector('.title').href = result.url;
  let snippetText = result.snippet != null ?
    result.snippet.snippet : '';
  fragment.querySelector('.query_snippet').innerHTML = snippetText;
  return fragment.firstElementChild;
}

উইজেটটি শুরু করার সময় অ্যাডাপ্টারটি নিবন্ধন করতে, সংশ্লিষ্ট Builder ক্লাসের setAdapter() পদ্ধতিটি ব্যবহার করুন:

পরিবেশন/উইজেট/পাবলিক/উইথ_কাস্টম_এলিমেন্ট/অ্যাপ.জেএস
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(new ResultsContainerAdapter())
  // ...
  .build();

// Build the search box and bind to DOM elements.
var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setAdapter(new SearchBoxAdapter())
  // ...
  .build();

createFacetResultElement দিয়ে কাস্টম ফ্যাসেট এলিমেন্ট তৈরি করা বেশ কিছু বিধিনিষেধ সাপেক্ষে:

  • ব্যবহারকারীরা যে এলিমেন্টে ক্লিক করেন, বাকেট টগল করার জন্য আপনাকে CSS ক্লাস cloudsearch_facet_bucket_clickable সংযুক্ত করতে হবে।
  • আপনাকে CSS ক্লাস cloudsearch_facet_bucket_container ব্যবহার করে প্রতিটি বাকেট একটি কন্টেনিং এলিমেন্টে মুড়িয়ে রাখতে হবে।
  • আপনি বাকেটগুলিকে প্রতিক্রিয়ায় প্রদর্শিত ক্রমে ভিন্ন ক্রমে রেন্ডার করতে পারবেন না।

উদাহরণস্বরূপ, নিম্নলিখিত স্নিপেটটি চেক বাক্সের পরিবর্তে লিঙ্ক ব্যবহার করে দিকগুলি রেন্ডার করে।

পরিবেশন/উইজেট/পাবলিক/উইথ_কাস্টম_ফ্যাসেট/অ্যাপ.জেএস
/**
 * Results container adapter that intercepts requests to dynamically
 * change which sources are enabled based on user selection.
 */
function ResultsContainerAdapter() {
  this.selectedSource = null;
}

ResultsContainerAdapter.prototype.createFacetResultElement = function(result) {
  // container for the facet
  var container = document.createElement('div');

  // Add a label describing the facet (operator/property)
  var label = document.createElement('div')
  label.classList.add('facet_label');
  label.textContent = result.operatorName;
  container.appendChild(label);

  // Add each bucket
  for(var i in result.buckets) {
    var bucket = document.createElement('div');
    bucket.classList.add('cloudsearch_facet_bucket_container');

    // Extract & render value from structured value
    // Note: implementation of renderValue() not shown
    var bucketValue = this.renderValue(result.buckets[i].value)
    var link = document.createElement('a');
    link.classList.add('cloudsearch_facet_bucket_clickable');
    link.textContent = bucketValue;
    bucket.appendChild(link);
    container.appendChild(bucket);
  }
  return container;
}

// Renders a value for user display
ResultsContainerAdapter.prototype.renderValue = function(value) {
  // ...
}

অনুসন্ধান আচরণ কাস্টমাইজ করুন

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

এক্সিকিউশনের আগে সার্চ এপিআইতে করা অনুরোধগুলি সংশোধন করতে interceptSearchRequest পদ্ধতি সহ একটি অ্যাডাপ্টার প্রয়োগ করুন।

উদাহরণস্বরূপ, নিম্নলিখিত অ্যাডাপ্টারটি ব্যবহারকারী-নির্বাচিত উৎসে প্রশ্নগুলি সীমাবদ্ধ করার অনুরোধগুলিকে বাধা দেয়:

সার্ভিং/উইজেট/পাবলিক/উইথ_রিকোয়েস্ট_ইন্টারসেপ্টর/অ্যাপ.জেএস
/**
 * Results container adapter that intercepts requests to dynamically
 * change which sources are enabled based on user selection.
 */
function ResultsContainerAdapter() {
  this.selectedSource = null;
}
ResultsContainerAdapter.prototype.interceptSearchRequest = function(request) {
  if (!this.selectedSource || this.selectedSource == 'ALL') {
    // Everything selected, fall back to sources defined in the search
    // application.
    request.dataSourceRestrictions = null;
  } else {
    // Restrict to a single selected source.
    request.dataSourceRestrictions = [
      {
        source: {
          predefinedSource: this.selectedSource
        }
      }
    ];
  }
  return request;
}

উইজেটটি শুরু করার সময় অ্যাডাপ্টারটি নিবন্ধন করতে, ResultsContainer তৈরি করার সময় setAdapter() পদ্ধতিটি ব্যবহার করুন।

সার্ভিং/উইজেট/পাবলিক/উইথ_রিকোয়েস্ট_ইন্টারসেপ্টর/অ্যাপ.জেএস
var resultsContainerAdapter = new ResultsContainerAdapter();
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(resultsContainerAdapter)
  // ...
  .build();

উৎস অনুসারে ফিল্টার করার জন্য একটি নির্বাচন বাক্স প্রদর্শন করতে নিম্নলিখিত HTML ব্যবহার করা হয়:

পরিবেশন/উইজেট/পাবলিক/উইথ_রিকোয়েস্ট_ইন্টারসেপ্টর/ইনডেক্স.এইচটিএমএল
<div>
  <span>Source</span>
  <select id="sources">
    <option value="ALL">All</option>
    <option value="GOOGLE_GMAIL">Gmail</option>
    <option value="GOOGLE_DRIVE">Drive</option>
    <option value="GOOGLE_SITES">Sites</option>
    <option value="GOOGLE_GROUPS">Groups</option>
    <option value="GOOGLE_CALENDAR">Calendar</option>
    <option value="GOOGLE_KEEP">Keep</option>
  </select>
</div>

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

সার্ভিং/উইজেট/পাবলিক/উইথ_রিকোয়েস্ট_ইন্টারসেপ্টর/অ্যাপ.জেএস
// Handle source selection
document.getElementById('sources').onchange = (e) => {
  resultsContainerAdapter.selectedSource = e.target.value;
  let request = resultsContainer.getCurrentRequest();
  if (request.query) {
    // Re-execute if there's a valid query. The source selection
    // will be applied in the interceptor.
    resultsContainer.resetState();
    resultsContainer.executeRequest(request);
  }
}

আপনি অ্যাডাপ্টারে interceptSearchResponse প্রয়োগ করে অনুসন্ধান প্রতিক্রিয়াটিও আটকাতে পারেন।

API ভার্সনটি পিন করুন

ডিফল্টরূপে উইজেটটি API এর সর্বশেষ স্থিতিশীল সংস্করণ ব্যবহার করে। একটি নির্দিষ্ট সংস্করণ লক ইন করতে, উইজেটটি শুরু করার আগে cloudsearch.config/apiVersion কনফিগারেশন প্যারামিটারটিকে পছন্দের সংস্করণে সেট করুন।

পরিবেশন/উইজেট/পাবলিক/বেসিক/অ্যাপ.জেএস
gapi.config.update('cloudsearch.config/apiVersion', 'v1');

API সংস্করণটি সেট না করা হলে অথবা একটি অবৈধ মান সেট করা হলে ডিফল্টভাবে 1.0 তে থাকবে।

উইজেট ভার্সনটি পিন করুন

অনুসন্ধান ইন্টারফেসে অপ্রত্যাশিত পরিবর্তন এড়াতে, দেখানো পদ্ধতি অনুসারে cloudsearch.config/clientVersion কনফিগারেশন প্যারামিটার সেট করুন: 

gapi.config.update('cloudsearch.config/clientVersion', 1.1);

উইজেট সংস্করণটি সেট না করা হলে অথবা একটি অবৈধ মান সেট করা হলে ডিফল্টভাবে 1.0 তে থাকবে।

অনুসন্ধান ইন্টারফেসটি সুরক্ষিত করুন

অনুসন্ধানের ফলাফলে অত্যন্ত সংবেদনশীল তথ্য থাকে। ওয়েব অ্যাপ্লিকেশনগুলিকে সুরক্ষিত করার জন্য, বিশেষ করে ক্লিকজ্যাকিং আক্রমণের বিরুদ্ধে সর্বোত্তম অনুশীলনগুলি অনুসরণ করুন।

আরও তথ্যের জন্য, OWASP গাইড প্রকল্প দেখুন

ডিবাগিং সক্ষম করুন

অনুসন্ধান উইজেটের জন্য ডিবাগিং চালু করতে interceptSearchRequest ব্যবহার করুন। উদাহরণস্বরূপ: 

  if (!request.requestOptions) {
  // Make sure requestOptions is populated
  request.requestOptions = {};
  }
  // Enable debugging
  request.requestOptions.debugOptions = {enableDebugging: true}

  return request;