หน้านี้ได้รับการแปลโดย Cloud Translation API

Programmable Search Element Control API

ขณะนี้ Programmable Search Element Control API นำเสนอวิธีที่ง่ายขึ้นในการปรับแต่งช่องค้นหา โดยมีสิทธิประโยชน์ดังนี้

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

คุณฝังคอมโพเนนต์ 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 รองรับได้ที่นี่

ผู้ชม

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

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

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

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

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

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

Programmable Search Elements ประเภทที่พร้อมให้ใช้งานมีดังนี้

ประเภทองค์ประกอบ	องค์ประกอบ	คำอธิบาย
มาตรฐาน	`<div class="gcse-search">`	ช่องค้นหาและผลการค้นหา ที่แสดงใน `<div>` เดียวกัน
สองคอลัมน์	`<div class="gcse-searchbox">`และ`<div class="gcse-searchresults">`	เลย์เอาต์แบบ 2 คอลัมน์ที่มีผลการค้นหาอยู่ที่ด้านหนึ่งและช่องค้นหาในอีกด้านหนึ่ง หากมีแผนที่จะแทรกองค์ประกอบหลายรายการในโหมด 2 คอลัมน์ในหน้าเว็บ ให้ใช้แอตทริบิวต์ `gname` เพื่อจับคู่ช่องค้นหากับบล็อกผลการค้นหา
ช่องค้นหาเท่านั้น	`<div class="gcse-searchbox-only">`	ช่องค้นหาแบบสแตนด์อโลน
ผลการค้นหาเท่านั้น	`<div class="gcse-searchresults-only">`	บล็อกเดี่ยวของผลการค้นหา

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

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

ตัวเลือก	องค์ประกอบ
เต็มความกว้าง	`<div class="gcse-search">`
กะทัดรัด	`<div class="gcse-search">`
2 คอลัมน์	`<div class="gcse-searchbox">` `<div class="gcse-searchresults">`
2 หน้า เรียบง่าย ช่องค้นหาและส่วนผลการค้นหาหลายส่วน	`<div class="gcse-searchbox-only">` ในหน้าแรก `<div class="gcse-searchresults-only">` (หรือองค์ประกอบอื่นๆ) ในหน้าที่ 2
ผลลัพธ์เท่านั้น ค้นหาผ่าน URL ค้นหาผ่านช่องค้นหา	`<div class="gcse-searchresults-only">`
โฮสต์โดย Google ผลลัพธ์เปิดในหน้าต่างเดียวกัน ผลลัพธ์เปิดในหน้าต่างหน้าต่างใหม่	`<div class="gcse-searchbox-only">`

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

การปรับแต่งองค์ประกอบของ 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">

แอตทริบิวต์ที่รองรับ

แอตทริบิวต์	ประเภท	คำอธิบาย	ส่วนประกอบ
ทั่วไป
`gname`	สตริง	(ไม่บังคับ) ชื่อของออบเจ็กต์ Search Element ชื่อใช้สำหรับเรียกคอมโพเนนต์ที่เกี่ยวข้องตามชื่อ หรือเพื่อจับคู่คอมโพเนนต์ `searchbox` กับคอมโพเนนต์ `searchresults` หากไม่ได้ระบุไว้ Programmable Search Engine จะสร้าง `gname` โดยอัตโนมัติตามลำดับของคอมโพเนนต์ในหน้าเว็บ เช่น `searchbox-only` แรกที่ไม่มีชื่อมี `gname` "searchbox-only0" และรายการที่ 2 มี `gname` "seachbox-only1" ต่อไปเรื่อยๆ โปรดทราบว่า `gname` ที่สร้างขึ้นโดยอัตโนมัติสำหรับคอมโพเนนต์ในเลย์เอาต์ 2 คอลัมน์จะเป็น `two-column` ตัวอย่างต่อไปนี้ใช้ gname `storesearch` เพื่อลิงก์คอมโพเนนต์ `searchbox` กับคอมโพเนนต์ `searchresults` <div class="gcse-searchbox" data-gname="storesearch"></div> <div class="gcse-searchresults" data-gname="storesearch"></div> เมื่อเรียกข้อมูลออบเจ็กต์ หากมีคอมโพเนนต์มากกว่า 1 รายการมี `gname` เหมือนกัน Programmable Search Engine จะใช้คอมโพเนนต์สุดท้ายในหน้านั้น	ตามแต่ละประเทศ
`autoSearchOnLoad`	บูลีน	ระบุว่าจะดำเนินการค้นหาตามคำค้นหาที่ฝังอยู่ใน URL ของหน้าเว็บที่กำลังโหลดหรือไม่ โปรดทราบว่าต้องมีสตริงคำค้นหาใน URL เพื่อเรียกใช้การค้นหาอัตโนมัติ ค่าเริ่มต้น: `true`	ตามแต่ละประเทศ
`enableHistory`	บูลีน	หากเป็น `true` จะเปิดใช้การจัดการประวัติสำหรับปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์ ดูการสาธิต	searchbox ช่องค้นหาเท่านั้น
`queryParameterName`	สตริง	ชื่อพารามิเตอร์ของการค้นหา เช่น `q` (ค่าเริ่มต้น) หรือ `query` ซึ่งจะฝังอยู่ใน URL (เช่น http://www.example.com?q=lady+gaga) โปรดทราบว่าการระบุชื่อพารามิเตอร์การค้นหาเพียงอย่างเดียวไม่ได้เรียกใช้การค้นหาอัตโนมัติขณะโหลด ต้องมีสตริงคำค้นหาใน URL จึงจะเรียกใช้การค้นหาอัตโนมัติได้	ตามแต่ละประเทศ
`resultsUrl`	URL	URL ของหน้าผลการค้นหา (ค่าเริ่มต้นคือหน้าที่โฮสต์โดย Google)	ช่องค้นหาเท่านั้น
`newWindow`	บูลีน	ระบุว่าหน้าผลลัพธ์จะเปิดในหน้าต่างใหม่หรือไม่ ค่าเริ่มต้น: `false`	ช่องค้นหาเท่านั้น
`ivt`	บูลีน	พารามิเตอร์นี้ช่วยให้คุณระบุบูลีนที่แจ้งให้ Google ทราบว่าคุณต้องการอนุญาตโฆษณาที่ใช้คุกกี้เพื่อการเข้าชมเท่านั้นและพื้นที่เก็บข้อมูลในเครื่องที่ไม่ถูกต้องกับการเข้าชมทั้งที่ได้รับความยินยอมและไม่ยินยอม `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`	บูลีน	ใช้ได้เฉพาะเมื่อเปิดใช้การเติมข้อความอัตโนมัติในแผงควบคุม Programmable Search Engine เท่านั้น `true` เปิดใช้การเติมข้อความอัตโนมัติ	ตามแต่ละประเทศ
`autoCompleteMaxCompletions`	จำนวนเต็ม	จำนวนสูงสุดของการเติมข้อความอัตโนมัติที่จะแสดง	searchbox ช่องค้นหาเท่านั้น
`autoCompleteMaxPromotions`	จำนวนเต็ม	จำนวนโปรโมชันสูงสุดที่จะแสดงในการเติมข้อความอัตโนมัติ	searchbox ช่องค้นหาเท่านั้น
`autoCompleteValidLanguages`	สตริง	รายการภาษาที่คั่นด้วยจุลภาคซึ่งควรเปิดใช้การเติมข้อความอัตโนมัติ ภาษาที่รองรับ	searchbox ช่องค้นหาเท่านั้น
การปรับแต่ง
`defaultToRefinement`	สตริง	ใช้ได้เฉพาะเมื่อมีการสร้างการปรับเกณฑ์การค้นหาในแผงควบคุม Programmable Search Engine เท่านั้น ระบุป้ายกำกับการปรับแต่งเริ่มต้นที่จะแสดง หมายเหตุ: ไม่รองรับแอตทริบิวต์นี้สำหรับการออกแบบที่โฮสต์โดย Google	ตามแต่ละประเทศ
`refinementStyle`	สตริง	ค่าที่ยอมรับได้คือ `tab` (ค่าเริ่มต้น) และ `link` ระบบจะรองรับ `link` ก็ต่อเมื่อมีการปิดใช้การค้นหารูปภาพ หรือเปิดใช้การค้นหารูปภาพ แต่ปิดการค้นเว็บไว้	ผลการค้นหา ผลการค้นหาเท่านั้น
การค้นหาด้วยรูปภาพ
`enableImageSearch`	บูลีน	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น หากเป็น `true` จะเปิดใช้การค้นหารูปภาพ ผลการค้นหารูปภาพจะแสดงในแท็บแยกต่างหาก	ผลการค้นหา ผลการค้นหาเท่านั้น
`defaultToImageSearch`	บูลีน	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น หากตั้งค่าเป็น `true` หน้าผลการค้นหาจะแสดงผลการค้นหารูปภาพโดยค่าเริ่มต้น ผลการค้นหาเว็บจะมีอยู่ในแท็บแยกต่างหาก	ตามแต่ละประเทศ
`imageSearchLayout`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น ระบุเลย์เอาต์ของหน้าผลการค้นหารูปภาพ ค่าที่ยอมรับได้คือ `classic`, `column` หรือ `popup`	ผลการค้นหา ผลการค้นหาเท่านั้น
`imageSearchResultSetSize`	จำนวนเต็ม สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น ระบุขนาดสูงสุดของผลการค้นหาที่ตั้งค่าไว้สำหรับการค้นหาด้วยรูปภาพ เช่น `large`, `small`, `filtered_cse`, `10`	ตามแต่ละประเทศ
`image_as_filetype`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น จำกัดผลการค้นหาเฉพาะไฟล์ของนามสกุลที่ระบุ ส่วนขยายที่รองรับ ได้แก่ `jpg`, `gif`, `png`, `bmp`, `svg`, `webp`, `ico`, `raw`	ตามแต่ละประเทศ
`image_as_oq`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น กรองผลการค้นหาโดยใช้ Logical OR ตัวอย่างการใช้งานหากคุณต้องการผลการค้นหาที่มี "term1" หรือ "term2":`<div class="gcse-search" data-image_as_oq="term1 term2"></div>`	ตามแต่ละประเทศ
`image_as_rights`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น ตัวกรองตามการอนุญาตให้ใช้สิทธิ ค่าที่รองรับคือ `cc_publicdomain`, `cc_attribute`, `cc_sharealike`, `cc_noncommercial`, `cc_nonderived` และชุดค่าผสมของค่าเหล่านี้ ดูชุดค่าผสมทั่วไป	ตามแต่ละประเทศ
`image_as_sitesearch`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น จำกัดผลการค้นหาเฉพาะหน้าเว็บจากเว็บไซต์ที่เจาะจง ตัวอย่างการใช้งาน: `<div class="gcse-search" data-image_as_sitesearch="example.com"></div>`	ตามแต่ละประเทศ
`image_colortype`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น จำกัดการค้นหารูปภาพขาวดำ (โมโน) โทนสีเทา หรือรูปภาพสี ค่าที่รองรับคือ `mono`, `gray`, `color`	ตามแต่ละประเทศ
`image_cr`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น จำกัดผลการค้นหาเฉพาะเอกสารที่มาจากประเทศที่กำหนดไว้เท่านั้น ค่าที่รองรับ	ตามแต่ละประเทศ
`image_dominantcolor`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น จำกัดการค้นหาเฉพาะรูปภาพที่มีสีโดดเด่น ค่าที่รองรับคือ `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple`, `pink`, `white`, `gray`, `black`, `brown`	ตามแต่ละประเทศ
`image_filter`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น การกรองอัตโนมัติของผลการค้นหา ค่าที่รองรับ: 0/1 ตัวอย่างการใช้งาน: `<div class="gcse-search" data-image_filter="0"></div>`	ตามแต่ละประเทศ
`image_gl`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น เพิ่มผลการค้นหาที่ประเทศต้นทางตรงกับค่าพารามิเตอร์ ค่าที่รองรับ	ตามแต่ละประเทศ
`image_size`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น แสดงรูปภาพตามขนาดที่ระบุ ซึ่งขนาดอาจเป็น `icon`, `small`, `medium`, `large`, `xlarge`, `xxlarge` หรือ `huge.`	ตามแต่ละประเทศ
`image_sort_by`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น จัดเรียงผลลัพธ์โดยใช้วันที่หรือเนื้อหาที่มีโครงสร้างอื่นๆ หากต้องการจัดเรียงตามความเกี่ยวข้อง ให้ใช้สตริงว่าง (image_sort_by="") ตัวอย่างการใช้งาน: `<div class="gcse-search" data-image_sort_by="date"></div>`	ตามแต่ละประเทศ
`image_type`	สตริง	ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น จำกัดการค้นหารูปภาพของประเภทที่ระบุเท่านั้น ค่าที่รองรับ ได้แก่ `clipart` (คลิปอาร์ต), `face` (ใบหน้าบุคคล), `lineart` (ภาพวาดลายเส้น), `stock` (ภาพสต็อก), `photo` (รูปภาพ) และ `animated` (GIF แบบเคลื่อนไหว)	ตามแต่ละประเทศ
ค้นเว็บ
`disableWebSearch`	บูลีน	หากเป็น `true` จะปิดการค้นหาเว็บ โดยปกติแล้วจะใช้ก็ต่อเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine	ผลการค้นหา ผลการค้นหาเท่านั้น
`webSearchQueryAddition`	สตริง	เพิ่มคำเพิ่มเติมในคำค้นหาโดยใช้ตรรกะ OR ตัวอย่างการใช้งาน: `<div class="gcse-search" data-webSearchQueryAddition="term1 term2"></div>`	ตามแต่ละประเทศ
`webSearchResultSetSize`	จำนวนเต็ม สตริง	ขนาดสูงสุดของชุดผลลัพธ์ มีผลกับทั้งการค้นหารูปภาพและการค้นเว็บ ค่าเริ่มต้นขึ้นอยู่กับเลย์เอาต์และการกำหนดค่า Programmable Search Engine ให้ค้นหาทั้งเว็บหรือเว็บไซต์ที่ระบุเท่านั้น ค่าที่ยอมรับมีดังนี้ จำนวนเต็มตั้งแต่ 1-20 `small`: ขอชุดผลการค้นหาขนาดเล็ก ซึ่งโดยทั่วไปจะเป็นผลการค้นหา 4 รายการต่อหน้า `large`: ขอชุดผลลัพธ์ขนาดใหญ่ ซึ่งโดยทั่วไปคือผลการค้นหา 8 รายการต่อหน้า `filtered_cse`: ขอผลการค้นหาสูงสุด 10 รายการต่อหน้า สูงสุด 10 หน้าหรือ 100 ผลการค้นหา	ตามแต่ละประเทศ
`webSearchSafesearch`	สตริง	ระบุว่าจะเปิดใช้SafeSearchสำหรับผลการค้นเว็บหรือไม่ ค่าที่ระบบยอมรับคือ `off` และ `active`	ตามแต่ละประเทศ
`as_filetype`	สตริง	จำกัดผลการค้นหาเฉพาะไฟล์ของนามสกุลที่ระบุ โปรดดูรายการประเภทไฟล์ที่ Google จัดทำดัชนีได้ในศูนย์ช่วยเหลือของ Search Console	ตามแต่ละประเทศ
`as_oq`	สตริง	กรองผลการค้นหาโดยใช้ Logical 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`	สตริง	การกรองอัตโนมัติของผลการค้นหา ค่าที่รองรับ: 0/1 ตัวอย่างการใช้งาน: `<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`	สตริง	จัดเรียงผลลัพธ์โดยใช้วันที่หรือเนื้อหาที่มีโครงสร้างอื่นๆ ค่าแอตทริบิวต์ต้องเป็นหนึ่งในตัวเลือกที่มีในการตั้งค่าการจัดเรียงผลลัพธ์ของ Programmable Search หากต้องการจัดเรียงตามความเกี่ยวข้อง ให้ใช้สตริงว่าง (sort_by="") ตัวอย่างการใช้งาน: `<div class="gcse-search" data-sort_by="date"></div>`	ตามแต่ละประเทศ
ผลการค้นหา
`enableOrderBy`	บูลีน	เปิดใช้การจัดเรียงผลการค้นหาตามความเกี่ยวข้อง วันที่ หรือป้ายกำกับ	ตามแต่ละประเทศ
`linkTarget`	สตริง	กำหนดเป้าหมายของลิงก์ ค่าเริ่มต้น: `_blank`	ผลการค้นหา ผลการค้นหาเท่านั้น
`noResultsString`	สตริง	ระบุข้อความเริ่มต้นที่จะแสดงเมื่อไม่พบผลการค้นหาที่ตรงกับคำค้นหา คุณใช้สตริงผลการค้นหาเริ่มต้นเพื่อแสดงสตริงที่แปลแล้วในทุกภาษาที่รองรับได้ แต่ภาษาที่กำหนดเองจะไม่แสดง	ผลการค้นหา ผลการค้นหาเท่านั้น
`resultSetSize`	จำนวนเต็ม สตริง	ขนาดสูงสุดของชุดผลลัพธ์ เช่น `large`, `small`, `filtered_cse`, `10` ค่าเริ่มต้นขึ้นอยู่กับเลย์เอาต์และการกำหนดค่าเครื่องมือให้ค้นหาทั้งเว็บหรือเฉพาะเว็บไซต์ที่ระบุ	ตามแต่ละประเทศ
`safeSearch`	สตริง	ระบุว่าจะเปิดใช้ ฟีเจอร์ค้นหาปลอดภัยสำหรับการค้นหาทั้งในเว็บและรูปภาพหรือไม่ ค่าที่ระบบยอมรับคือ `off` และ `active`	ตามแต่ละประเทศ

โค้ดเรียกกลับ

โค้ดเรียกกลับรองรับการควบคุมการเริ่มต้นองค์ประกอบการค้นหาและกระบวนการค้นหาโดยละเอียด แท็กดังกล่าวมีการลงทะเบียนกับ JavaScript ในองค์ประกอบของ Search ผ่านออบเจ็กต์ __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 จะแสดงเอลิเมนต์การค้นหาใน DOM หากตั้งค่า parsetags เป็น explicit ใน __gcse JavaScript สำหรับองค์ประกอบ Search จะคงการแสดงผล Search Elements ไว้ตามโค้ดเรียกกลับการเริ่มต้น (ตามที่แสดงในโค้ดเรียกกลับลงทะเบียน) ตัวเลือกนี้อาจใช้เพื่อเลือกองค์ประกอบที่จะแสดงผลหรือเลื่อนการแสดงผลองค์ประกอบออกไปจนกว่าจะจำเป็นต้องใช้ และยังลบล้างแอตทริบิวต์ขององค์ประกอบได้ด้วย เช่น เปลี่ยนช่องค้นหาที่กำหนดค่าผ่านแผงควบคุมหรือแอตทริบิวต์ HTML ให้ทำการค้นหาเว็บเป็นช่องค้นหารูปภาพเป็นค่าเริ่มต้น หรือระบุว่าการค้นหาที่ส่งผ่านฟอร์ม Programmable Search Engine จะดำเนินการในองค์ประกอบเฉพาะผลการค้นหาเท่านั้น ดูการสาธิต

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

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

โค้ดต่อไปนี้แสดงวิธีแสดงผลช่องค้นหาพร้อมกับผลการค้นหาใน div โดยใช้แท็กการแยกวิเคราะห์และการเรียกกลับการเริ่มต้นของ explicit

หมายเหตุ: ตัวอย่างที่ดำเนินการได้ในหน้านี้จะทำงานในเว็บไซต์ JSFiddle มองหาปุ่ม jsfiddle

ที่ด้านบนขวาของโค้ดบล็อก การกดแป้นพิมพ์จะเปิดหน้า JSFiddle ที่มีตัวอย่างแสดงในแผง HTML, JavaScript, css และrun โดยจะเริ่ม "alive" ดังนั้นเพียงแค่ป้อนคำค้นหาในช่องค้นหาที่แสดงในแผงการเรียกใช้และการเรียกใช้กลับจะทำงาน

ตัวอย่างในเอกสารนี้จะแบ่งออกเป็นส่วนต่างๆ ตามประเภทและหน้าที่ แต่มีดังนี้

ทุกส่วนของตัวอย่างจะส่งไปยัง JSFiddle ร่วมกัน
แต่ละส่วนของตัวอย่างมีปุ่ม JSFiddle ทุกคนล้วนทำสิ่งเดียวกัน

เนื่องจากนี่คือ JSFiddle คุณจึงเล่นโดยใช้โค้ดได้ ระบบจะไม่เผยแพร่การเปลี่ยนแปลงที่ดำเนินการใน JSFiddle กลับไปยังเอกสารนี้

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

เราจำเป็นต้องใส่ <div> ที่มีค่ารหัสในส่วนที่ต้องการใส่โค้ดองค์ประกอบของ Search ดังนี้

    <div id="test"></div>

เพิ่ม JavaScript นี้หลัง <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 นี้เพื่อเริ่มโหลดองค์ประกอบการค้นหา แทนที่ค่า cx ในวรรค src ด้วย cx ของคุณเอง

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

ค้นหาโค้ดเรียกกลับ

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

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

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

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

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

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

การเรียกกลับสำหรับรูปภาพ/การค้นเว็บ

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

searchStartingCallback(gname, query)

gname: สตริงการระบุขององค์ประกอบ Search
query: ค่าที่ผู้ใช้ป้อน (อาจแก้ไขโดย JavaScript ขององค์ประกอบการค้นหา)

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

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

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

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

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

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

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

หมายเหตุ: โค้ดเรียกกลับอาจแก้ไขค่าของพารามิเตอร์ได้อย่างอิสระ การเปลี่ยนแปลงของ gname, query, promos, และ results จะไม่มีผลกับลักษณะการทำงานของ JavaScript ในองค์ประกอบ Search แต่หากโค้ดเรียกกลับแสดงค่าเป็น "จริง" ระบบจะแสดงแผนผัง DOM ที่ div ด้วย

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

โค้ดเรียกกลับที่พร้อมสําหรับตัวอย่างผลลัพธ์

โค้ดเรียกกลับ 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 เช่นเดียวกับการเริ่มเรียกการค้นหา

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

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

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

callback(gname, query, promoElts, resultElts);

gname: สตริงการระบุขององค์ประกอบ Search
query: สตริงการค้นหา
promoElts: อาร์เรย์ขององค์ประกอบ DOM ที่มีโปรโมชัน
resultElts: อาร์เรย์ขององค์ประกอบ DOM ที่มีผลลัพธ์

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

หมายเหตุ: การเปลี่ยนค่า gname และ query จะไม่เปลี่ยนลักษณะการทำงานของ JavaScript ในองค์ประกอบ Search แต่การเปลี่ยนแปลงรายการใน promoElts และ resultElts เป็นการเปลี่ยนแปลงของ DOM

หมายเหตุ: เฉพาะองค์ประกอบ DOM ที่แสดงผลโดย JavaScript ขององค์ประกอบ Search เท่านั้นที่จะส่งไปยังโค้ดเรียกกลับของ resultsRendered

ตัวอย่างผลลัพธ์ที่แสดงโค้ดเรียกกลับ

ตัวอย่างโค้ดเรียกกลับ 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>

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

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

พร็อพเพอร์ตี้ผลการค้นหาที่ได้รับการสนับสนุนและผลลัพธ์

การใช้เครื่องหมาย 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,
}

richSnippet ในผลลัพธ์มีประเภทอาร์เรย์ของออบเจ็กต์แบบคร่าวๆ ค่าของรายการในอาร์เรย์นี้ควบคุมโดย Structured Data ที่พบในหน้าเว็บสําหรับผลการค้นหาแต่ละรายการ เช่น เว็บไซต์รีวิวอาจรวมข้อมูลที่มีโครงสร้างที่เพิ่มรายการอาร์เรย์นี้ไปยัง richSnippet:

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

Programmable Search Element Control API (V2)

ออบเจ็กต์ google.search.cse.element จะเผยแพร่ฟังก์ชันแบบคงที่ต่อไปนี้

การทำงาน คำอธิบาย

.render(componentConfig, opt_componentConfig)

แสดงผลองค์ประกอบของ Search

พารามิเตอร์

ชื่อ คำอธิบาย

componentConfig

การกำหนดค่าสำหรับคอมโพเนนต์ Programmable Search Element ระบุข้อมูลต่อไปนี้

div (สตริง|องค์ประกอบ): id ของ <div> หรือองค์ประกอบ div ที่องค์ประกอบ Programmable Search จะแสดงผล
tag (สตริง): ประเภทของคอมโพเนนต์ที่จะแสดงผล (เมื่อระบุ opt_componentConfig ค่าของแอตทริบิวต์ tag ต้องเป็น searchbox) ค่าที่อนุญาตคือ
- search: ช่องค้นหาและผลการค้นหาจะแสดงร่วมกัน
- searchbox: คอมโพเนนต์ช่องค้นหาในองค์ประกอบ Programmable Search
- searchbox-only: ช่องค้นหาแบบสแตนด์อโลน ซึ่งจะจับคู่กับบล็อกของผลการค้นหาที่ระบุโดย opt_componentConfig ในการจัดวางแบบ 2 คอลัมน์
- searchresults-only: บล็อกผลการค้นหาแบบสแตนด์อโลน การค้นหาจะถูกเรียกใช้โดยพารามิเตอร์การค้นหาที่ฝังอยู่ใน URL หรือโดยการดำเนินการแบบเป็นโปรแกรม
gname (สตริง): (ไม่บังคับ) ชื่อที่ไม่ซ้ำกันสำหรับคอมโพเนนต์นี้ หากไม่ได้กำหนดไว้ Programmable Search Engine จะสร้าง gname โดยอัตโนมัติ
attributes (ออบเจ็กต์): แอตทริบิวต์ที่ไม่บังคับในรูปแบบคู่คีย์:ค่า แอตทริบิวต์ที่รองรับ

opt_componentConfig

ไม่บังคับ อาร์กิวเมนต์การกำหนดค่าคอมโพเนนต์ที่สอง ใช้ในโหมด TWO_COLUMN เพื่อระบุคอมโพเนนต์ searchresults ระบุข้อมูลต่อไปนี้

div (สตริง): id ของ <div> หรือองค์ประกอบ div ที่จะแสดงผลองค์ประกอบ
tag (สตริง): ประเภทของคอมโพเนนต์ที่จะแสดงผล เมื่อมีการระบุ opt_componentConfig ค่าของแอตทริบิวต์ tag ต้องเป็น searchresults นอกจากนี้ค่าของแอตทริบิวต์ tag ของ componentConfig ต้องเป็น searchbox ด้วย
gname (สตริง): (ไม่บังคับ) ชื่อที่ไม่ซ้ำกันสำหรับคอมโพเนนต์นี้ หากไม่ได้กำหนดไว้ Programmable Search Engine จะสร้าง gname สำหรับคอมโพเนนต์นี้โดยอัตโนมัติ หากให้ข้อมูลนี้ต้องตรงกับ gname ใน componentConfig
attributes (ออบเจ็กต์): แอตทริบิวต์ที่ไม่บังคับในรูปแบบคู่คีย์-ค่า แอตทริบิวต์ที่รองรับ

.go(opt_container)

แสดงผลแท็ก/คลาสองค์ประกอบของ Search ทั้งหมดในคอนเทนเนอร์ที่ระบุ

พารามิเตอร์

ชื่อ คำอธิบาย

opt_container คอนเทนเนอร์ที่มีคอมโพเนนต์ของ Search Element ที่จะแสดง ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือตัวองค์ประกอบเอง หากไม่ระบุ ระบบจะแสดงผลคอมโพเนนต์ Programmable Search Element ทั้งหมดภายในแท็ก body ของหน้าเว็บ

.getElement(gname)

รับออบเจ็กต์องค์ประกอบภายใน gname หากไม่พบ ให้แสดงผลเป็น Null

ออบเจ็กต์ element ที่แสดงผลมีแอตทริบิวต์ต่อไปนี้

gname: ชื่อของออบเจ็กต์องค์ประกอบ หากไม่ระบุ Programmable Search Engine จะสร้าง gname สำหรับออบเจ็กต์โดยอัตโนมัติ ข้อมูลเพิ่มเติม
type: ประเภทองค์ประกอบ
uiOptions: แอตทริบิวต์สุดท้ายที่ใช้ในการแสดงผลองค์ประกอบ
execute -ฟังก์ชัน(สตริง): เรียกใช้การค้นหาแบบเป็นโปรแกรม
prefillQuery - function(string): เติมสตริงการค้นหาไว้ล่วงหน้าในช่องค้นหาโดยไม่ต้องเรียกใช้การค้นหา
getInputQuery - function(): รับค่าปัจจุบันที่แสดงในช่องป้อนข้อมูล
clearAllResults - function(): ล้างการควบคุมโดยซ่อนทุกอย่างยกเว้นช่องค้นหา (หากมี)

โค้ดต่อไปนี้จะเรียกทำการค้นหา "news" ในองค์ประกอบการค้นหา "element1":

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

.getAllElements() แสดงผลแผนที่ของออบเจ็กต์องค์ประกอบที่สร้างเสร็จสมบูรณ์ทั้งหมด ซึ่งคีย์โดย gname