Programmable Search एलिमेंट कंट्रोल एपीआई

एचटीएमएल मार्कअप का इस्तेमाल करके, अपने वेब पेजों और अन्य वेब ऐप्लिकेशन में Programmable Search Engine के कॉम्पोनेंट (खोज बॉक्स और खोज के नतीजों वाले पेज) एम्बेड किए जा सकते हैं. Programmable Search Engine के इन एलिमेंट में ऐसे कॉम्पोनेंट होते हैं जिन्हें Programmable Search सर्वर में सेव की गई सेटिंग के आधार पर रेंडर किया जाता है. साथ ही, इसमें आपके किए गए सभी बदलाव भी शामिल होते हैं.

सभी JavaScript को एसिंक्रोनस तरीके से लोड किया जाता है. इससे आपका वेबपेज लोड होता रहता है, जबकि ब्राउज़र Programmable Search Engine JavaScript को फ़ेच करता है.

परिचय

इस दस्तावेज़ में, अपने वेब पेज में Programmable Search Engine के एलिमेंट जोड़ने के लिए एक बुनियादी मॉडल दिया गया है. साथ ही, इसमें एलिमेंट के कॉन्फ़िगर किए जा सकने वाले कॉम्पोनेंट और फ़्लेक्सिबल JavaScript API के बारे में बताया गया है.

स्कोप

इस दस्तावेज़ में, Programmable Search Engine Control API के लिए खास तौर पर उपलब्ध फ़ंक्शन और प्रॉपर्टी इस्तेमाल करने के तरीके के बारे में बताया गया है.

ब्राउज़र किस-किस के साथ काम करता है

Programmable Search Engine के साथ काम करने वाले ब्राउज़र की सूची यहां देखी जा सकती है.

दर्शक

यह दस्तावेज़ उन डेवलपर के लिए है जो अपने पेजों में Google Programmable Search की सुविधा जोड़ना चाहते हैं.

Programmable Search के एलिमेंट

अपने पेज पर Programmable Search एलिमेंट जोड़ने के लिए, एचटीएमएल मार्कअप का इस्तेमाल किया जा सकता है. हर एलिमेंट में कम से कम एक कॉम्पोनेंट होता है: खोज बॉक्स, खोज नतीजों का ब्लॉक या दोनों. खोज बॉक्स में उपयोगकर्ता का इनपुट, इनमें से किसी भी तरीके से डाला जा सकता है:

• टेक्स्ट इनपुट फ़ील्ड में टाइप की गई खोज क्वेरी
• यूआरएल में एम्बेड की गई क्वेरी स्ट्रिंग
• प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस का ऐक्सेस

इसके अलावा, खोज के नतीजों वाले ब्लॉक में इनपुट देने के लिए, ये तरीके इस्तेमाल किए जा सकते हैं:

• यूआरएल में एम्बेड की गई क्वेरी स्ट्रिंग
• प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस का ऐक्सेस

Programmable Search के ये एलिमेंट उपलब्ध हैं:

अपने वेबपेज में, जितने चाहें उतने मान्य सर्च एलिमेंट जोड़े जा सकते हैं. दो कॉलम वाले मोड के लिए, सभी ज़रूरी कॉम्पोनेंट (खोज बॉक्स और खोज के नतीजों वाला ब्लॉक) मौजूद होने चाहिए.

यहां एक सामान्य Search Element का उदाहरण दिया गया है:

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

Programmable Search Elements का इस्तेमाल करके, अलग-अलग लेआउट विकल्प कंपोज़ करना

Programmable Search Engine के कंट्रोल पैनल के 'लुक और फ़ील' पेज पर, ये लेआउट विकल्प उपलब्ध हैं. Programmable Search Elements का इस्तेमाल करके, लेआउट के विकल्प बनाने के बारे में यहां कुछ सामान्य दिशा-निर्देश दिए गए हैं. इनमें से किसी भी विकल्प का डेमो देखने के लिए, लिंक पर क्लिक करें.

लेआउट के विकल्पों के बारे में ज़्यादा जानकारी.

Programmable Search के एलिमेंट को पसंद के मुताबिक बनाना

रंग, फ़ॉन्ट या लिंक स्टाइल को पसंद के मुताबिक बनाने के लिए, अपने प्रोग्रामेबल सर्च इंजन के लुक ऐंड फ़ील पेज पर जाएं.

Programmable Search Engine के कंट्रोल पैनल में बनाए गए कॉन्फ़िगरेशन को बदलने के लिए, वैकल्पिक एट्रिब्यूट का इस्तेमाल किया जा सकता है. इससे आपको पेज के हिसाब से खोज का अनुभव बनाने में मदद मिलती है. उदाहरण के लिए, यह कोड एक ऐसा खोज बॉक्स बनाता है जो नई विंडो में नतीजों वाला पेज (http://www.example.com?search=lady+gaga) खोलता है. queryParameterName एट्रिब्यूट की वैल्यू और उपयोगकर्ता की क्वेरी स्ट्रिंग का इस्तेमाल, नतीजों का यूआरएल बनाने के लिए किया जाता है.

ध्यान दें कि queryParameterName एट्रिब्यूट के पहले data- लगाया गया है. यह प्रीफ़िक्स सभी एट्रिब्यूट के लिए ज़रूरी है.

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

अगर आपने Programmable Search Engine के कंट्रोल पैनल का इस्तेमाल करके, ऑटोकंप्लीट या खोज को बेहतर बनाने जैसी सुविधाएं चालू की हैं, तो इन सुविधाओं को अपनी पसंद के मुताबिक बनाने के लिए एट्रिब्यूट का इस्तेमाल किया जा सकता है. इन एट्रिब्यूट का इस्तेमाल करके किए गए सभी बदलाव, कंट्रोल पैनल में की गई सेटिंग को बदल देंगे. इस उदाहरण में, दो कॉलम वाला Search Element बनाया गया है. इसमें ये सुविधाएं शामिल हैं:

• इतिहास मैनेज करने की सुविधा चालू है
• ऑटोमैटिक तरीके से पूरे होने वाले सुझावों की ज़्यादा से ज़्यादा संख्या 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>

कॉलबैक

कॉलबैक की मदद से, खोज के एलिमेंट को शुरू करने और खोज की प्रोसेस को बेहतर तरीके से कंट्रोल किया जा सकता है. ये Search Element JavaScript के साथ, ग्लोबल __gcse ऑब्जेक्ट के ज़रिए रजिस्टर किए जाते हैं. Register Callbacks में, सभी सपोर्ट किए गए कॉलबैक के रजिस्ट्रेशन के बारे में बताया गया है.

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

डेटा लेयर में इवेंट बनाने की प्रोसेस

सर्च एलिमेंट JavaScript, DOM में सर्च एलिमेंट रेंडर करने से पहले, इनिशियलाइज़ेशन कॉलबैक को शुरू करती है. अगर __gcse में parsetags को explicit पर सेट किया जाता है, तो Search Element JavaScript, Search Element को रेंडर करने का काम, इनिशियलाइज़ेशन कॉलबैक को सौंप देता है. इसे Register Callbacks में दिखाया गया है. इसका इस्तेमाल, रेंडर करने के लिए एलिमेंट चुनने या एलिमेंट को तब तक रेंडर न करने के लिए किया जा सकता है, जब तक उनकी ज़रूरत न हो. यह एलिमेंट के एट्रिब्यूट को भी बदल सकता है. उदाहरण के लिए, यह कंट्रोल पैनल या एचटीएमएल एट्रिब्यूट के ज़रिए कॉन्फ़िगर किए गए सर्चबॉक्स को डिफ़ॉल्ट रूप से वेब खोज के बजाय इमेज सर्च बॉक्स में बदल सकता है. इसके अलावा, यह यह भी तय कर सकता है कि Programmable Search Engine फ़ॉर्म के ज़रिए सबमिट की गई क्वेरी, सिर्फ़ searchresults एलिमेंट में एक्ज़ीक्यूट की जाएं. डेमो देखें.

इनिशियलाइज़ेशन कॉलबैक की भूमिका को __gcse की parsetags प्रॉपर्टी की वैल्यू से कंट्रोल किया जाता है.

• अगर इसकी वैल्यू onload है, तो Search Element JavaScript, पेज पर मौजूद सभी Search Element को अपने-आप रेंडर कर देता है. शुरुआत में कॉल बैक अब भी शुरू होता है, लेकिन यह Search Elements को रेंडर करने के लिए ज़िम्मेदार नहीं होता.
• अगर इसकी वैल्यू explicit पर सेट होती है, तो Search Element JavaScript, Search Element को रेंडर नहीं करता है. कॉल बैक, render() फ़ंक्शन का इस्तेमाल करके, उन्हें चुनिंदा तौर पर रेंडर कर सकता है. इसके अलावा, go() फ़ंक्शन का इस्तेमाल करके, सभी खोज एलिमेंट रेंडर कर सकता है

यहां दिए गए कोड में, div का इस्तेमाल करके खोज के नतीजों के साथ-साथ खोज बॉक्स को रेंडर करने का तरीका बताया गया है. इसके लिए, explicit parsetag और initialization callback का इस्तेमाल किया गया है:

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

Search पर कॉलबैक

Search Element JavaScript में छह कॉलबैक काम करते हैं. ये खोज के कंट्रोल फ़्लो में काम करते हैं. खोज के लिए इस्तेमाल किए जाने वाले कॉलबैक, जोड़े में आते हैं. एक वेब-सर्च कॉलबैक और दूसरा, मिलती-जुलती इमेज खोजने के लिए इस्तेमाल किया जाने वाला कॉलबैक:

• खोज शुरू करना
  • इमेज सर्च के लिए
  • वेब पर खोज करने के लिए
• नतीजे तैयार हैं
  • इमेज सर्च के लिए
  • वेब पर खोज करने के लिए
• नतीजे रेंडर किए गए
  • इमेज सर्च के लिए
  • वेब पर खोज करने के लिए

शुरू करने के लिए कॉलबैक की तरह ही,खोज के लिए कॉलबैक को __gcse ऑब्जेक्ट में मौजूद एंट्री का इस्तेमाल करके कॉन्फ़िगर किया जाता है. ऐसा Search Element JavaScript के शुरू होने पर होता है. शुरू होने के बाद, __gcse में किए गए बदलावों को अनदेखा कर दिया जाता है.

इनमें से हर कॉलबैक को Search Element के लिए gName को आर्ग्युमेंट के तौर पर पास किया जाता है. gname तब काम की होती है, जब किसी पेज पर एक से ज़्यादा खोजें मौजूद हों. data-gname एट्रिब्यूट का इस्तेमाल करके, खोज वाले एलिमेंट को gname वैल्यू दें:

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

अगर एचटीएमएल, gname की पहचान नहीं करता है, तो Search Element JavaScript एक ऐसी वैल्यू जनरेट करता है जो एचटीएमएल में बदलाव होने तक एक जैसी रहती है.

इमेज/वेब खोज शुरू होने पर कॉलबैक

खोज शुरू होने पर कॉल किए जाने वाले फ़ंक्शन, Search Element JavaScript के अपने सर्वर से खोज के नतीजे मांगने से ठीक पहले शुरू हो जाते हैं. इस्तेमाल के उदाहरण के तौर पर, दिन के स्थानीय समय का इस्तेमाल करके क्वेरी में किए जाने वाले बदलावों को कंट्रोल किया जा सकता है.

searchStartingCallback(gname, query)

gname

Search Element की पहचान करने वाली स्ट्रिंग

query

उपयोगकर्ता की ओर से डाली गई वैल्यू (सर्च एलिमेंट के JavaScript से इसमें बदलाव किया जा सकता है.)

कॉलबैक, वह वैल्यू दिखाता है जिसका इस्तेमाल इस खोज के लिए क्वेरी के तौर पर किया जाना चाहिए. अगर यह खाली स्ट्रिंग दिखाता है, तो रिटर्न वैल्यू को अनदेखा कर दिया जाता है. साथ ही, कॉल करने वाला व्यक्ति बिना बदलाव वाली क्वेरी का इस्तेमाल करता है.

इसके अलावा, कॉलबैक फ़ंक्शन को __gcse ऑब्जेक्ट में रखा जा सकता है या JavaScript की मदद से, कॉलबैक को ऑब्जेक्ट में डाइनैमिक तरीके से जोड़ा जा सकता है:

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>

इमेज/वेब खोज के नतीजों के लिए तैयार कॉलबैक

इन कॉलबैक को, Search Element JavaScript के प्रमोशन और नतीजे रेंडर करने से ठीक पहले शुरू किया जाता है. इस्तेमाल के उदाहरण के तौर पर, एक ऐसा कॉलबैक लिया जा सकता है जो प्रमोशन और नतीजों को ऐसी स्टाइल में रेंडर करता है जिसे सामान्य तौर पर पसंद के मुताबिक नहीं बनाया जा सकता.

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

gname

Search Element की पहचान करने वाली स्ट्रिंग

query

क्वेरी जिससे ये नतीजे मिले हैं

promos

प्रमोशन ऑब्जेक्ट की कैटगरी, जो उपयोगकर्ता की क्वेरी से मेल खाने वाले प्रमोशन से जुड़ी होती है. प्रमोशन ऑब्जेक्ट की परिभाषा देखें.

results

नतीजे के ऑब्जेक्ट का कलेक्शन. नतीजे के ऑब्जेक्ट की परिभाषा देखें.

div

एक एचटीएमएल डिव, जिसे DOM में रखा जाता है. आम तौर पर, Search Element इस जगह पर प्रमोशन और खोज के नतीजे दिखाता है. आम तौर पर, Search Element JavaScript इस div को भरने का काम करती है. हालांकि, यह कॉलबैक, नतीजों को अपने-आप रेंडर होने से रोक सकता है. साथ ही, नतीजों को रेंडर करने के लिए इस div का इस्तेमाल कर सकता है.

अगर यह कॉलबैक true वैल्यू दिखाता है, तो Search Element JavaScript, पेज-फ़ुटर के काम को छोड़ देता है.

'नतीजे तैयार हैं' कॉलबैक का उदाहरण

नतीजे तैयार होने पर कॉल करने वाले फ़ंक्शन का उदाहरण में मौजूद 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>

इमेज/वेब खोज के नतीजे-रेंडर किया गया कॉलबैक

इन कॉलबैक को तब शुरू किया जाता है, जब Search Element JavaScript, पेज के फ़ुटर को रेंडर करता है. इस्तेमाल के उदाहरणों में, ऐसा कॉलबैक शामिल होगा जो खोज के नतीजों में ऐसा कॉन्टेंट जोड़ता है जिसे खोज एलिमेंट नहीं दिखाता. जैसे, इसे सेव करें चेकबॉक्स या ऐसी जानकारी जो अपने-आप रेंडर नहीं होती. इसके अलावा, ऐसा कॉलबैक भी शामिल होगा जो ज़्यादा जानकारी के लिए बटन जोड़ता है.

अगर नतीजे रेंडर होने के बाद कॉल किए जाने वाले फ़ंक्शन को ऐसी जानकारी चाहिए जो नतीजे तैयार होने के बाद कॉल किए जाने वाले फ़ंक्शन के promos और results पैरामीटर में मौजूद थी, तो वह जानकारी इन दोनों फ़ंक्शन के बीच इस तरह पास की जा सकती है:

callback(gname, query, promoElts, resultElts);

gname

Search Element की पहचान करने वाली स्ट्रिंग

query

सर्च स्ट्रिंग.

promoElts

प्रमोशन दिखाने वाले डीओएम एलिमेंट की कैटगरी.

resultElts

डीओएम एलिमेंट की एक कैटगरी, जिसमें नतीजे शामिल होते हैं.

कोई भी वैल्यू नहीं दिखती है.

नतीजे रेंडर किए जाने के कॉलबैक का उदाहरण

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

अगर results rendered callback को ऐसी जानकारी की ज़रूरत है जो results ready callback को पास की गई थी, तो वह उस डेटा को कॉलबैक के बीच पास कर सकता है. यहां दिए गए उदाहरण में, नतीजे दिखाने के लिए तैयार कॉलबैक से नतीजे रेंडर किए गए कॉलबैक तक, 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>

नतीजे रेंडर करने वाले कॉलबैक का उदाहरण: नए टैब/विंडो में कुछ खास तरह की फ़ाइलें खोलना

यहां दिए गए कॉलबैक के उदाहरण से, खोज के नतीजों में दिखने वाले लिंक में बदलाव किया जा सकता है. ऐसा तब किया जाता है, जब लिंक रेंडर हो जाते हैं. इससे मौजूदा विंडो के बजाय, किसी नई टैब/पेज में कोई फ़ाइल खुलती है. उदाहरण के लिए: PDF, Excel या Word. इससे ब्राउज़िंग का अनुभव बेहतर होता है. ऐसा तब होता है, जब उपयोगकर्ता किसी फ़ाइल को उसी विंडो में नहीं खोलना चाहते और नतीजों वाले पेज से हट जाते हैं.

इस कॉलबैक के उदाहरण में, खोज के नतीजों में मौजूद PDF लिंक की पहचान की जाती है. साथ ही, PDF लिंक पर target="_blank" एट्रिब्यूट सेट किया जाता है, ताकि वे नए टैब में खुलें. अगर पेज अपडेट होता है, तो नए नतीजों को डाइनैमिक तरीके से मैनेज करने के लिए, MutationObserver का इस्तेमाल किया जाता है. ध्यान दें: अपनी ज़रूरत के हिसाब से, handleSearchResults में मौजूद .pdf को किसी दूसरे फ़ाइल टाइप से बदला जा सकता है.

यह कॉलबैक उदाहरण, Google Hosted और ओवरले लेआउट पर काम नहीं करता.

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

कॉलबैक के अन्य उदाहरण

कॉलबैक के अन्य उदाहरण, कॉलबैक के अन्य उदाहरण दस्तावेज़ में देखे जा सकते हैं.

प्रमोशन और नतीजे वाली प्रॉपर्टी

JSDoc नोटेशन का इस्तेमाल करके, यहां promotion और result ऑब्जेक्ट की प्रॉपर्टी दी गई हैं. यहां हम उन सभी प्रॉपर्टी की सूची देते हैं जो मौजूद हो सकती हैं. इनमें से कई प्रॉपर्टी, प्रमोशन या खोज के नतीजे की जानकारी पर निर्भर करती हैं.

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

results में मौजूद richSnippet में ऑब्जेक्ट की शृंखला का लूज़ टाइप है. इस कलेक्शन में मौजूद हर एंट्री की वैल्यू को, खोज के हर नतीजे के लिए वेब पेज पर मौजूद स्ट्रक्चर्ड डेटा से कंट्रोल किया जाता है. उदाहरण के लिए, समीक्षा करने वाली कोई वेबसाइट ऐसा स्ट्रक्चर्ड डेटा शामिल कर सकती है जो इस ऐरे एंट्री को richSnippet में जोड़ता है:

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

Programmable Search Element Control API (V2)

google.search.cse.element ऑब्जेक्ट, इन स्टैटिक फ़ंक्शन को पब्लिश करता है:

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