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 มีดังต่อไปนี้

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

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

ตัวเลือก คอมโพเนนต์
ความกว้างเต็ม <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
ผลการค้นหาเท่านั้น <div class="gcse-searchresults-only">
ที่ฝากไว้กับ Google <div class="gcse-searchbox-only">

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

การปรับแต่ง 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">

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

แอตทริบิวต์ ประเภท คำอธิบาย ส่วนประกอบ
ทั่วไป
gname สตริง (ไม่บังคับ) ชื่อสำหรับออบเจ็กต์ Search Element ชื่อจะใช้ในการเรียก คอมโพเนนต์ที่เชื่อมโยงตามชื่อ หรือเพื่อจับคู่ searchbox ที่มีคอมโพเนนต์ searchresults หากไม่ระบุ Programmable Search Engine จะสร้าง gname ขึ้นโดยอัตโนมัติตาม ลำดับขององค์ประกอบในหน้าเว็บ ตัวอย่างเช่น ชื่อแรกที่ไม่มีชื่อ searchbox-only มี gname "ช่องค้นหาเท่านั้น" และแบบที่ 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 จะเป็นการเปิดใช้การจัดการประวัติสำหรับเบราว์เซอร์ "กลับ" และปุ่มไปข้างหน้า ดูการสาธิต

ช่องค้นหา

ช่องค้นหาเท่านั้น
queryParameterName สตริง ชื่อพารามิเตอร์การค้นหา เช่น q (ค่าเริ่มต้น) หรือ query ซึ่งจะฝังอยู่ใน URL (ตัวอย่างเช่น http://www.example.com?q=lady+gaga) โปรดทราบว่าการระบุฟิลด์ ชื่อพารามิเตอร์การค้นหาเพียงอย่างเดียวจะไม่เรียกใช้การค้นหาอัตโนมัติขณะโหลด การค้นหา ต้องมีสตริงใน URL เพื่อเรียกใช้การค้นหาอัตโนมัติ ตามแต่ละประเทศ
resultsUrl URL URL ของหน้าผลการค้นหา (ค่าเริ่มต้นคือหน้าเว็บที่โฮสต์โดย Google) ช่องค้นหาเท่านั้น
newWindow บูลีน ระบุว่าหน้าผลการค้นหาจะเปิดในหน้าต่างใหม่หรือไม่ ค่าเริ่มต้น: false ช่องค้นหาเท่านั้น
ivt บูลีน

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

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

false เมื่อคุณตั้งค่าพารามิเตอร์นี้เป็น "เท็จ" เราจะตั้งค่า คุกกี้ที่วัดการเข้าชมเท่านั้นและใช้พื้นที่เก็บข้อมูลในเครื่องทั้งกับการเข้าชมที่ได้รับความยินยอมและไม่ได้รับความยินยอม

ค่าเริ่มต้น: false

ตัวอย่างการใช้งาน: <div class="gcse-search" data-ivt="true"></div>

ผลการค้นหา

searchresults-only
mobileLayout สตริง

ระบุว่าควรใช้รูปแบบเลย์เอาต์สำหรับอุปกรณ์เคลื่อนที่สำหรับอุปกรณ์เคลื่อนที่หรือไม่

enabled ใช้เลย์เอาต์บนอุปกรณ์เคลื่อนที่สำหรับอุปกรณ์เคลื่อนที่เท่านั้น

disabled ไม่ได้ใช้เลย์เอาต์สำหรับอุปกรณ์เคลื่อนที่สำหรับอุปกรณ์ใดๆ

forced ใช้เลย์เอาต์อุปกรณ์เคลื่อนที่สำหรับอุปกรณ์ทั้งหมด

ค่าเริ่มต้น: enabled

ตัวอย่างการใช้งาน: <div class="gcse-search" data-mobileLayout="disabled"></div>

ตามแต่ละประเทศ
เติมข้อความอัตโนมัติ
enableAutoComplete บูลีน ใช้ได้เฉพาะเมื่อเปิดใช้การเติมข้อความอัตโนมัติในแผงควบคุม Programmable Search Engine เท่านั้น true เปิดใช้การเติมข้อความอัตโนมัติ ตามแต่ละประเทศ
autoCompleteMaxCompletions จำนวนเต็ม จำนวนการเติมข้อความอัตโนมัติสูงสุดที่จะแสดง

ช่องค้นหา

ช่องค้นหาเท่านั้น
autoCompleteMaxPromotions จำนวนเต็ม จำนวนโปรโมชันสูงสุดที่จะแสดงในการเติมข้อความอัตโนมัติ

ช่องค้นหา

ช่องค้นหาเท่านั้น
autoCompleteValidLanguages สตริง รายการภาษาที่คั่นด้วยคอมมาสำหรับการเติมข้อมูลอัตโนมัติ เปิดอยู่ ภาษาที่รองรับ

ช่องค้นหา

ช่องค้นหาเท่านั้น
การปรับเกณฑ์การค้นหา
defaultToRefinement สตริง ใช้ได้ต่อเมื่อมีการสร้างการปรับเกณฑ์การค้นหาใน แผงควบคุม Programmable Search Engine ระบุป้ายกำกับการปรับแต่งเริ่มต้นเป็น display.หมายเหตุ: เค้าโครงที่ Google โฮสต์ไม่รองรับแอตทริบิวต์นี้ ตามแต่ละประเทศ
refinementStyle สตริง ค่าที่ยอมรับได้คือ tab (ค่าเริ่มต้น) และ link จะรองรับ link ก็ต่อเมื่อปิดการค้นหารูปภาพไว้ หรือเมื่อ เปิดใช้งานการค้นหารูปภาพ แต่การค้นหาเว็บถูกปิดใช้งาน

ผลการค้นหา

searchresults-only
การค้นหารูปภาพ
enableImageSearch บูลีน ใช้ได้เฉพาะเมื่อ การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว

หากเป็น true จะเป็นการเปิดใช้การค้นหารูปภาพ ผลการค้นหารูปภาพจะแสดงใน แท็บแยกต่างหาก

ผลการค้นหา

searchresults-only
defaultToImageSearch บูลีน ใช้ได้เฉพาะเมื่อ การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว

หาก true หน้าผลการค้นหาจะแสดงผลการค้นหารูปภาพ โดยค่าเริ่มต้น ผลการค้นหาบนเว็บจะแสดงในอีกแท็บหนึ่ง

ตามแต่ละประเทศ
imageSearchLayout สตริง ใช้ได้เฉพาะเมื่อ การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว

ระบุเลย์เอาต์ของหน้าผลการค้นหารูปภาพ ค่าที่ยอมรับได้ คือ classic, column หรือ popup

ผลการค้นหา

searchresults-only
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 แล้ว

กรองผลการค้นหาโดยใช้ตรรกะ 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 แล้ว

ผลการค้นหา

searchresults-only
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 สตริง กรองผลการค้นหาโดยใช้ตรรกะ 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 egnine

หากต้องการจัดเรียงตามความเกี่ยวข้อง ให้ใช้สตริงว่าง (sort_by="")

ตัวอย่างการใช้งาน: <div class="gcse-search" data-sort_by="date"></div>

 ตามแต่ละประเทศ
ผลการค้นหา
enableOrderBy บูลีน เปิดใช้งานการจัดเรียงผลลัพธ์ตามความเกี่ยวข้อง วันที่ หรือป้ายกำกับ ตามแต่ละประเทศ
linkTarget สตริง กำหนดเป้าหมายของลิงก์ ค่าเริ่มต้น: _blank

ผลการค้นหา

searchresults-only
noResultsString สตริง ระบุข้อความเริ่มต้นที่จะแสดงเมื่อไม่พบผลลัพธ์ที่ตรงกับข้อความค้นหา สตริงผลลัพธ์เริ่มต้นสามารถใช้เพื่อแสดงสตริงที่แปลแล้วในทุก ภาษาที่รองรับ แต่ภาษาที่กำหนดเองไม่มี

ผลการค้นหา

searchresults-only
resultSetSize จำนวนเต็ม, สตริง ขนาดสูงสุดของชุดผลลัพธ์ เช่น large small, filtered_cse, 10 ค่าเริ่มต้นขึ้นอยู่กับเลย์เอาต์และมีการกำหนดค่าเครื่องมือให้ค้นหาหรือไม่ ทั้งเว็บหรือเฉพาะเว็บไซต์ที่ระบุ ตามแต่ละประเทศ
safeSearch สตริง ระบุว่า ฟีเจอร์ค้นหาปลอดภัยเปิดอยู่สำหรับทั้งการค้นหาเว็บและรูปภาพ ค่าที่ยอมรับคือ off และ active ตามแต่ละประเทศ

Callback

แผนภาพลำดับการติดต่อกลับ
แผนภาพลำดับการติดต่อกลับจาก JavaScript ขององค์ประกอบการค้นหา

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

ลงทะเบียน 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 เริ่มต้น:

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

คุณต้องใส่ <div> ที่มีค่ารหัส ตำแหน่งที่เราต้องการโค้ดองค์ประกอบของการค้นหา: 

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

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

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

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

เช่นเดียวกับการค้นหาเริ่มต้น Callback ข้างต้นเป็นหนึ่งในหลายวิธีที่จะนำ Callback ในกรณี ออบเจ็กต์ __gcse รายการ

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 จำลอง ในช่องการโปรโมตและผลการค้นหาแต่ละรายการ

ตัวอย่าง Callback ที่แสดงผลลัพธ์ 
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);
    }
  };

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

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

ตัวอย่างของผลลัพธ์ Ready Callback ที่ร่วมมือกับ Results Rendered 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};
};
ติดตั้ง Callback นี้โดยใช้โค้ดแบบนี้ขณะตั้งค่า __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 มีดังนี้ ออบเจ็กต์โปรโมชันและผลลัพธ์ เราแสดงรายการพร็อพเพอร์ตี้ทั้งหมดที่อาจมี มีที่พักมากมาย ขึ้นอยู่กับรายละเอียดของโปรโมชันหรือผลการค้นหา

พร็อพเพอร์ตี้ของโปรโมชัน
{
  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) แสดงผลองค์ประกอบของการค้นหา

พารามิเตอร์

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

พารามิเตอร์

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

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

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

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

var element = google.search.cse.element.getElement('element1');
            element.execute('news');
.getAllElements() แสดงแผนที่ของออบเจ็กต์องค์ประกอบที่สร้างสำเร็จทั้งหมด คีย์โดย gname