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 ฟังก์ชันการค้นหาในหน้านั้น

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

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

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

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

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

Programmable Search Elements มีดังต่อไปนี้

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

ต่อไปนี้คือตัวอย่างของ 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 Element

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

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

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

Callback รองรับการควบคุมรายละเอียดสำหรับการเริ่มต้นองค์ประกอบการค้นหาและกระบวนการค้นหา โดยจะลงทะเบียนด้วย JavaScript องค์ประกอบของ Search ผ่านทาง __gcse ทั่วโลก ออบเจ็กต์ Registration Callbacks แสดงการลงทะเบียน API ทั้งหมด Callback ที่รองรับ

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

Callback ของการเริ่มต้น

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

บทบาทของ Callback การเริ่มต้นจะควบคุมโดยค่าของ parsetags ของ __gcse

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

โค้ดต่อไปนี้แสดงวิธีแสดงผลช่องค้นหา พร้อมด้วยผลการค้นหาใน div โดยใช้ explicit แยกวิเคราะห์และ 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>

ค้นหา Callback

JavaScript ของ Search Elements รองรับ Callback 6 แบบที่ทำงานใน ขั้นตอนการควบคุมการค้นหา Callback ของการค้นหาจะมาเป็นคู่กัน คือ Callback ของการค้นเว็บ และ Callback ของการค้นหารูปภาพที่ตรงกัน ดังนี้

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

เช่นเดียวกับ การเรียกกลับการเริ่มต้น (Callback) การค้นหาจะ กำหนดค่าโดยใช้รายการในออบเจ็กต์ __gcse ซึ่งจะแสดงเป็นองค์ประกอบการค้นหา JavaScript เริ่มทำงาน การแก้ไข __gcse หลังจากเริ่มต้นจะถูกละเว้น

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

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

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

Callback สำหรับการเริ่มต้นการค้นหารูปภาพ/เว็บ

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

searchStartingCallback(gname, query)

gname

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

query

ค่าที่ผู้ใช้ป้อน (ซึ่งอาจถูกแก้ไขโดยการค้นหา JavaScript ของเอลิเมนต์)

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

อีกทางเลือกหนึ่งคือ คุณสามารถวางฟังก์ชัน Callback ไว้ในออบเจ็กต์ __gcse หรือ เพิ่ม Callback ไปยังออบเจ็กต์ด้วย JavaScript แบบไดนามิก:

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

ตัวอย่าง Callback ที่เริ่มต้นการค้นหา

ตัวอย่างการค้นหาซึ่งเริ่มต้น Callback ใน ตัวอย่าง Callback เริ่มต้นของการค้นหาจะเพิ่ม morning หรือ afternoon ไปยังข้อความค้นหาโดยขึ้นอยู่กับช่วงเวลาของวัน

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

ติดตั้ง Callback นี้ใน 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>

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

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

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

gname

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

query

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

promos

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

results

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

div

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

หาก Callback นี้แสดงค่า true องค์ประกอบ Search จะข้ามไปที่ งานส่วนท้าย

ตัวอย่างผลลัพธ์พร้อมใช้ Callback

ตัวอย่าง Callback resultsReady ใน ตัวอย่างผลลัพธ์พร้อมใช้ 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>

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

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

หากผลลัพธ์ที่แสดงผล Callback ต้องการข้อมูลที่อยู่ใน promos และ results ของ results Ready Callback ซึ่งจะส่งต่อไปมาระหว่างพารามิเตอร์เหล่านี้ได้ ดังนี้

callback(gname, query, promoElts, resultElts);

gname

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

query

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

promoElts

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

resultElts

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

ไม่มีค่าผลลัพธ์

ตัวอย่างผลลัพธ์ที่แสดงผลของ Callback

ตัวอย่าง Callback resultsRendered ใน ตัวอย่างผลลัพธ์ที่แสดงผลของ 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>

หากต้องการผลลัพธ์ที่แสดงผล Callback ข้อมูลที่ส่งไปยังการติดต่อกลับที่พร้อมสำหรับผลลัพธ์ ซึ่งจะส่งต่อข้อมูลดังกล่าวระหว่าง Callback ตัวอย่างต่อไปนี้จะแสดงหนึ่งในหลายวิธีในการส่งค่าคะแนนจาก richSnippet จาก Callback ที่พร้อมสำหรับผลลัพธ์ไปยังผลลัพธ์ที่แสดง Callback

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

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

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

ตัวอย่างการติดต่อกลับเพิ่มเติม

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

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

การใช้สัญลักษณ์ JSDoc มีดังนี้ ออบเจ็กต์โปรโมชันและผลลัพธ์ เราแสดงรายการพร็อพเพอร์ตี้ทั้งหมดที่อาจมี มีที่พักมากมาย ขึ้นอยู่กับรายละเอียดของโปรโมชันหรือผลการค้นหา

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

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

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