Programmable Search Element Control API

คุณฝังคอมโพเนนต์ของ Programmable Search Engine (ช่องค้นหาและหน้าผลการค้นหา) ในหน้าเว็บและเว็บแอปพลิเคชันอื่นๆ ได้โดยใช้มาร์กอัป HTML องค์ประกอบ Programmable Search Engine เหล่านี้ประกอบด้วยคอมโพเนนต์ที่แสดงผลตามการตั้งค่าที่จัดเก็บไว้โดย เซิร์ฟเวอร์ Programmable Search พร้อมกับการปรับแต่งที่คุณทำ

ระบบจะโหลด JavaScript ทั้งหมดแบบไม่พร้อมกัน ซึ่งจะช่วยให้หน้าเว็บโหลดต่อไปได้ในขณะที่เบราว์เซอร์ดึงข้อมูล JavaScript ของ Programmable Search Engine

บทนำ

เอกสารนี้มีโมเดลพื้นฐานสำหรับการเพิ่มองค์ประกอบ Programmable Search Engine ลงในหน้าเว็บ พร้อมคำอธิบายเกี่ยวกับคอมโพเนนต์ที่กำหนดค่าได้และ JavaScript API ที่ยืดหยุ่นขององค์ประกอบ

ขอบเขต

เอกสารนี้อธิบายวิธีใช้ฟังก์ชันและพร็อพเพอร์ตี้ที่เฉพาะเจาะจงสำหรับ Programmable Search Engine Control API

ความเข้ากันได้กับเบราว์เซอร์

ดูรายการเบราว์เซอร์ที่ Programmable Search Engine รองรับได้ที่นี่

ผู้ชม

เอกสารนี้มีไว้สำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการเพิ่มฟังก์ชัน Google Programmable Search ลงในหน้าเว็บของตน

องค์ประกอบ Programmable Search

คุณใช้มาร์กอัป HTML เพื่อเพิ่มองค์ประกอบ Programmable Search ลงในหน้าเว็บได้ แต่ละองค์ประกอบ ประกอบด้วยคอมโพเนนต์อย่างน้อย 1 รายการ ได้แก่ ช่องค้นหา บล็อกผลการค้นหา หรือทั้ง 2 อย่าง ช่องค้นหายอมรับข้อมูลจากผู้ใช้ในรูปแบบต่อไปนี้

• คำค้นหาที่พิมพ์ในช่องป้อนข้อความ
• สตริงการค้นหาที่ฝังอยู่ใน URL
• การดำเนินการแบบเป็นโปรแกรม

นอกจากนี้ บล็อกผลการค้นหายังรับอินพุตใน วิธีต่อไปนี้ด้วย

• สตริงการค้นหาที่ฝังอยู่ใน URL
• การดำเนินการแบบเป็นโปรแกรม

องค์ประกอบ Programmable Search ประเภทต่อไปนี้พร้อมให้ใช้งาน

คุณเพิ่มองค์ประกอบการค้นหาที่ถูกต้องกี่รายการก็ได้ลงในหน้าเว็บ สำหรับโหมด 2 คอลัมน์ จะต้องมีคอมโพเนนต์ที่จำเป็นทั้งหมด (ช่องค้นหาและบล็อกผลการค้นหา )

ตัวอย่างองค์ประกอบการค้นหาแบบง่ายมีดังนี้

<!-- 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 หากต้องการดูการสาธิตตัวเลือกใดตัวเลือกหนึ่งเหล่านี้ ให้คลิกลิงก์

ข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกเลย์เอาต์

การปรับแต่งองค์ประกอบ Programmable Search

หากต้องการปรับแต่งสี แบบอักษร หรือสไตล์ลิงก์ ให้ไปที่หน้า "รูปลักษณ์" ของเครื่องมือค้นหาที่ตั้งโปรแกรมได้

คุณสามารถใช้แอตทริบิวต์ที่ไม่บังคับเพื่อเขียนทับการกำหนดค่าที่สร้างขึ้นในแผงควบคุม Programmable Search Engine ซึ่งจะช่วยให้คุณสร้างประสบการณ์การค้นหาเฉพาะหน้าได้ ตัวอย่างเช่น โค้ดต่อไปนี้จะสร้างช่องค้นหาที่เปิดหน้าผลการค้นหา (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">

หากใช้แผงควบคุม Programmable Search Engine เพื่อเปิดใช้ฟีเจอร์ต่างๆ เช่น การเติมข้อความอัตโนมัติหรือการปรับแต่ง คุณจะใช้แอตทริบิวต์เพื่อ ปรับแต่งฟีเจอร์เหล่านั้นได้ การปรับแต่งที่คุณระบุโดยใช้แอตทริบิวต์เหล่านี้ จะลบล้างการตั้งค่าที่ทำในแผงควบคุม ตัวอย่างต่อไปนี้สร้าง องค์ประกอบการค้นหาแบบ 2 คอลัมน์ที่มีฟีเจอร์ต่อไปนี้

• เปิดใช้การจัดการประวัติแล้ว
• ระบบจะตั้งค่าจำนวนการเติมข้อความอัตโนมัติที่แสดงสูงสุดเป็น 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>

การติดต่อกลับ

Callback รองรับการควบคุมโดยละเอียดของการเริ่มต้นองค์ประกอบการค้นหาและกระบวนการค้นหา โดยจะลงทะเบียนกับ JavaScript ขององค์ประกอบการค้นหาผ่านออบเจ็กต์ส่วนกลาง __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,
      },
    },
  };
  

การเรียกกลับการเริ่มต้น

ระบบจะเรียกใช้การเรียกกลับการเริ่มต้นก่อนที่ JavaScript ของ Search Element จะแสดงผลองค์ประกอบ search ใน DOM หากตั้งค่า parsetags เป็น explicit ใน __gcse JavaScript ของ Search Element จะปล่อยให้การแสดงผล Search Element เป็นหน้าที่ของ Callback การเริ่มต้น (ดังที่แสดงในลงทะเบียน Callback) ซึ่งอาจใช้เพื่อเลือกองค์ประกอบที่จะแสดงผล หรือเพื่อเลื่อนการแสดงผลองค์ประกอบจนกว่าจะจำเป็น นอกจากนี้ยังลบล้างแอตทริบิวต์ขององค์ประกอบได้ด้วย เช่น เปลี่ยนช่องค้นหาที่กำหนดค่าผ่านแผงควบคุมหรือแอตทริบิวต์ HTML ให้เป็นค่าเริ่มต้นสำหรับการค้นหาเว็บเป็นช่องค้นหารูปภาพ หรือระบุว่าคําค้นหาที่ส่งผ่านแบบฟอร์มเครื่องมือค้นหาที่โปรแกรมได้จะดำเนินการในองค์ประกอบ searchresults-only ดูการสาธิต

บทบาทของโปรแกรมเรียกกลับการเริ่มต้นจะควบคุมโดยค่าของพร็อพเพอร์ตี้ parsetags ของ __gcse

• หากค่าเป็น onload JavaScript ของ Search Element จะแสดงผล Search Element ทั้งหมดในหน้าเว็บโดยอัตโนมัติ ระบบจะยังเรียกใช้การเรียกกลับการเริ่มต้น แต่การเรียกกลับนี้จะไม่มีหน้าที่ในการแสดงผล Search Elements
• หากค่าเป็น explicit JavaScript ของ Search Element จะไม่แสดงผล Search Element โดยการเรียกกลับอาจแสดงผลแบบเลือกโดยใช้ฟังก์ชัน render() หรือแสดงผล Search Element ทั้งหมดด้วยฟังก์ชัน 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>

การเรียกกลับของ Search

JavaScript ขององค์ประกอบการค้นหารองรับ Callback 6 รายการที่ทำงานในโฟลว์การควบคุมการค้นหา การเรียกกลับของการค้นหาจะมาเป็นคู่ ซึ่งเป็นการเรียกกลับของการค้นหาเว็บและการเรียกกลับของการค้นหารูปภาพที่ตรงกัน

• การค้นหาเริ่มต้น
  • สำหรับการค้นหารูปภาพ
  • สำหรับการค้นหาบนเว็บ
• ผลลัพธ์พร้อมแล้ว
  • สำหรับการค้นหารูปภาพ
  • สำหรับการค้นหาบนเว็บ
• ผลการค้นหาที่แสดง
  • สำหรับการค้นหารูปภาพ
  • สำหรับการค้นหาบนเว็บ

เช่นเดียวกับการเรียกกลับการเริ่มต้น การเรียกกลับการค้นหาจะได้รับการกำหนดค่าโดยใช้รายการในออบเจ็กต์ __gcse เหตุการณ์นี้จะเกิดขึ้นเมื่อ JavaScript ของ Search Element เริ่มต้น ระบบจะละเว้นการแก้ไข __gcse หลังจากเริ่มต้น

โดยจะมีการส่ง gName สำหรับ องค์ประกอบการค้นหาเป็นอาร์กิวเมนต์ไปยังแต่ละแฮนเดิลเลอร์ gname มีประโยชน์เมื่อหน้าเว็บมีการค้นหามากกว่า 1 รายการ กำหนดค่า gname ให้องค์ประกอบ search โดยใช้แอตทริบิวต์ data-gname ดังนี้

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

หาก HTML ไม่ระบุ gname JavaScript ของ Search Element จะสร้างค่าที่จะ ยังคงสอดคล้องกันจนกว่าจะมีการแก้ไข HTML

การเรียกกลับเมื่อเริ่มการค้นหารูปภาพ/เว็บ

ระบบจะเรียกใช้การเรียกกลับของการเริ่มต้นการค้นหาก่อนที่ JavaScript ของ Search Element จะขอผลการค้นหาจากเซิร์ฟเวอร์ ตัวอย่างกรณีการใช้งานคือการใช้เวลาท้องถิ่นของวันเพื่อ ควบคุมการเปลี่ยนแปลงคําค้นหา

searchStartingCallback(gname, query)

gname

สตริงระบุขององค์ประกอบการค้นหา

query

ค่าที่ผู้ใช้ป้อน (อาจแก้ไขโดย JavaScript ขององค์ประกอบ search )

โดย Callback จะแสดงค่าที่ควรใช้เป็นคำค้นหาสำหรับการค้นหานี้ หากแสดงผลสตริงว่าง ระบบจะไม่สนใจค่าที่แสดงผลและผู้เรียกจะใช้การค้นหาที่ไม่มีการแก้ไข

หรือจะใส่ฟังก์ชัน Callback ในออบเจ็กต์ __gcse หรือ เพิ่ม Callback ลงในออบเจ็กต์แบบไดนามิกด้วย JavaScript ก็ได้

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

ตัวอย่าง 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>

การเรียกกลับที่พร้อมใช้งานสำหรับผลการค้นหารูปภาพ/เว็บ

ระบบจะเรียกใช้แฮนเดิลการเรียกกลับเหล่านี้ทันทีก่อนที่ JavaScript ขององค์ประกอบการค้นหาจะแสดงโปรโมชันและผลลัพธ์ กรณีการใช้งานตัวอย่างคือการเรียกกลับที่แสดงโปรโมชันและผลลัพธ์ในรูปแบบที่ ระบุไม่ได้ด้วยการปรับแต่งปกติ

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

gname

สตริงระบุขององค์ประกอบการค้นหา

query

คำค้นหาที่ทำให้เกิดผลลัพธ์เหล่านี้

promos

อาร์เรย์ของออบเจ็กต์โปรโมชันที่สอดคล้องกับโปรโมชันที่ตรงกันสำหรับการค้นหาของผู้ใช้ ดูคำจำกัดความของออบเจ็กต์โปรโมชัน

results

อาร์เรย์ของออบเจ็กต์ผลลัพธ์ ดูคำจำกัดความของออบเจ็กต์ผลลัพธ์

div

องค์ประกอบ HTML div ที่อยู่ใน DOM ซึ่งโดยปกติแล้ว Search Element จะ วางโปรโมชันและผลการค้นหา โดยปกติแล้ว JavaScript ของ Search Element จะจัดการ การป้อนข้อมูลใน div นี้ แต่การเรียกกลับนี้อาจเลือกที่จะหยุดการแสดงผลลัพธ์อัตโนมัติ และใช้ div นี้เพื่อแสดงผลลัพธ์ด้วยตนเอง

หาก Callback นี้แสดงผลค่า true JavaScript ของ Search Element จะข้ามไปทำงานส่วนท้ายของหน้า

ตัวอย่างการเรียกกลับเมื่อผลลัพธ์พร้อม

resultsReady ตัวอย่าง Callback ใน Example Results Ready Callback จะลบล้างการนำเสนอเริ่มต้น ของโปรโมชันและผลลัพธ์ด้วยการแทนที่อย่างง่าย

    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>

การเรียกกลับของผลการค้นหารูปภาพ/เว็บที่แสดง

ระบบจะเรียกใช้ฟังก์ชันเรียกกลับเหล่านี้ทันทีก่อนที่ JavaScript ของ Search Element จะแสดงผลส่วนท้ายของหน้า ตัวอย่างกรณีการใช้งาน ได้แก่ การเรียกกลับที่เพิ่มเนื้อหาผลการค้นหาที่องค์ประกอบการค้นหาไม่แสดง เช่น ช่องทำเครื่องหมายบันทึกรายการนี้ หรือข้อมูลที่ไม่ได้แสดงผลโดยอัตโนมัติ หรือการเรียกกลับที่เพิ่มปุ่มดูข้อมูลเพิ่มเติม

หากการเรียกกลับเมื่อแสดงผลลัพธ์ต้องการข้อมูลที่อยู่ในพารามิเตอร์ promos และ results ของการเรียกกลับเมื่อผลลัพธ์พร้อม ก็สามารถส่งต่อข้อมูลระหว่างกันได้ ดังนี้

callback(gname, query, promoElts, resultElts);

gname

สตริงระบุขององค์ประกอบการค้นหา

query

สตริงการค้นหา

promoElts

อาร์เรย์ขององค์ประกอบ DOM ที่มีการโปรโมต

resultElts

อาร์เรย์ขององค์ประกอบ DOM ที่มีผลลัพธ์

ไม่มีค่าที่ส่งคืน

ตัวอย่างการเรียกกลับเมื่อแสดงผลลัพธ์

ตัวอย่าง resultsRendered Callback ใน Example Results Rendered Callback จะเพิ่มช่องทำเครื่องหมาย 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>

ตัวอย่าง Callback การแสดงผล: การเปิดไฟล์ประเภทที่เฉพาะเจาะจงในแท็บ/หน้าต่างใหม่

ตัวอย่างการเรียกกลับต่อไปนี้สามารถแก้ไขลิงก์ผลการค้นหาหลังจากแสดงผลแล้วเพื่อเปิดไฟล์ที่เฉพาะเจาะจงในแท็บ/หน้าใหม่แทนหน้าต่างปัจจุบัน (เช่น PDF, Excel หรือ Word) ซึ่งจะช่วยปรับปรุงประสบการณ์การท่องเว็บเมื่อผู้ใช้ไม่ต้องการเปิดไฟล์ในหน้าต่างเดียวกันและออกจากหน้าผลการค้นหา

ตัวอย่างการเรียกกลับนี้จะระบุลิงก์ PDF ในผลการค้นหาและตั้งค่าแอตทริบิวต์ target="_blank" ในลิงก์ PDF เพื่อให้ลิงก์เปิดในแท็บใหม่ ระบบจะใช้ MutationObserver เพื่อจัดการผลลัพธ์ใหม่แบบไดนามิกหากหน้าเว็บมีการอัปเดต หมายเหตุ: คุณสามารถแทนที่ .pdf ใน handleSearchResults ด้วยไฟล์ประเภทอื่นได้ตามต้องการ

ตัวอย่างการเรียกกลับนี้ใช้ไม่ได้กับเลย์เอาต์ที่ Google โฮสต์และเลย์เอาต์แบบวางซ้อน

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>

ตัวอย่าง Callback เพิ่มเติม

ดูตัวอย่าง Callback เพิ่มเติมได้ในเอกสารตัวอย่าง Callback เพิ่มเติม

พร็อพเพอร์ตี้โปรโมชันและพร็อพเพอร์ตี้ผลลัพธ์

พร็อพเพอร์ตี้ของออบเจ็กต์ promotion และ result มีดังนี้โดยใช้สัญกรณ์ 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 ใน results มีประเภทแบบหลวมของอาร์เรย์ของ ออบเจ็กต์ ค่าของรายการในอาร์เรย์นี้ควบคุมโดย Structured Data ที่พบในหน้าเว็บสำหรับผลการค้นหาแต่ละรายการ เช่น เว็บไซต์รีวิวอาจมี Structured Data ที่เพิ่มรายการอาร์เรย์นี้ลงใน 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');