คุณฝังคอมโพเนนต์ 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 |
ผลลัพธ์เท่านั้น | <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 รายการมี |
ตามแต่ละประเทศ |
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 ทราบว่าคุณต้องการอนุญาตโฆษณาที่ใช้คุกกี้เพื่อการเข้าชมเท่านั้นและพื้นที่เก็บข้อมูลในเครื่องที่ไม่ถูกต้องกับการเข้าชมทั้งที่ได้รับความยินยอมและไม่ยินยอม
ค่าเริ่มต้น: ตัวอย่างการใช้งาน: |
ผลการค้นหา ผลการค้นหาเท่านั้น |
mobileLayout |
สตริง |
ระบุว่าควรใช้รูปแบบการจัดวางสำหรับอุปกรณ์เคลื่อนที่หรือไม่
ค่าเริ่มต้น: ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
เติมข้อความอัตโนมัติ | |||
enableAutoComplete |
บูลีน | ใช้ได้เฉพาะเมื่อเปิดใช้การเติมข้อความอัตโนมัติในแผงควบคุม Programmable Search Engine เท่านั้น
true เปิดใช้การเติมข้อความอัตโนมัติ |
ตามแต่ละประเทศ |
autoCompleteMaxCompletions |
จำนวนเต็ม | จำนวนสูงสุดของการเติมข้อความอัตโนมัติที่จะแสดง | searchbox ช่องค้นหาเท่านั้น |
autoCompleteMaxPromotions |
จำนวนเต็ม | จำนวนโปรโมชันสูงสุดที่จะแสดงในการเติมข้อความอัตโนมัติ | searchbox ช่องค้นหาเท่านั้น |
autoCompleteValidLanguages |
สตริง | รายการภาษาที่คั่นด้วยจุลภาคซึ่งควรเปิดใช้การเติมข้อความอัตโนมัติ ภาษาที่รองรับ | searchbox ช่องค้นหาเท่านั้น |
การปรับแต่ง | |||
defaultToRefinement |
สตริง | ใช้ได้เฉพาะเมื่อมีการสร้างการปรับเกณฑ์การค้นหาในแผงควบคุม Programmable Search Engine เท่านั้น ระบุป้ายกำกับการปรับแต่งเริ่มต้นที่จะแสดง หมายเหตุ: ไม่รองรับแอตทริบิวต์นี้สำหรับการออกแบบที่โฮสต์โดย Google | ตามแต่ละประเทศ |
refinementStyle |
สตริง | ค่าที่ยอมรับได้คือ tab (ค่าเริ่มต้น) และ link
ระบบจะรองรับ link ก็ต่อเมื่อมีการปิดใช้การค้นหารูปภาพ หรือเปิดใช้การค้นหารูปภาพ แต่ปิดการค้นเว็บไว้ |
ผลการค้นหา ผลการค้นหาเท่านั้น |
การค้นหาด้วยรูปภาพ | |||
enableImageSearch |
บูลีน | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
หากเป็น |
ผลการค้นหา ผลการค้นหาเท่านั้น |
defaultToImageSearch |
บูลีน | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
หากตั้งค่าเป็น |
ตามแต่ละประเทศ |
imageSearchLayout |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
ระบุเลย์เอาต์ของหน้าผลการค้นหารูปภาพ ค่าที่ยอมรับได้คือ |
ผลการค้นหา ผลการค้นหาเท่านั้น |
imageSearchResultSetSize |
จำนวนเต็ม สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
ระบุขนาดสูงสุดของผลการค้นหาที่ตั้งค่าไว้สำหรับการค้นหาด้วยรูปภาพ
เช่น |
ตามแต่ละประเทศ |
image_as_filetype |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
จำกัดผลการค้นหาเฉพาะไฟล์ของนามสกุลที่ระบุ ส่วนขยายที่รองรับ ได้แก่ | ตามแต่ละประเทศ |
image_as_oq |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
กรองผลการค้นหาโดยใช้ Logical OR ตัวอย่างการใช้งานหากคุณต้องการผลการค้นหาที่มี "term1" หรือ "term2": | ตามแต่ละประเทศ |
image_as_rights |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
ตัวกรองตามการอนุญาตให้ใช้สิทธิ ค่าที่รองรับคือ | ตามแต่ละประเทศ |
image_as_sitesearch |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
จำกัดผลการค้นหาเฉพาะหน้าเว็บจากเว็บไซต์ที่เจาะจง ตัวอย่างการใช้งาน: | ตามแต่ละประเทศ |
image_colortype |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
จำกัดการค้นหารูปภาพขาวดำ (โมโน) โทนสีเทา หรือรูปภาพสี ค่าที่รองรับคือ | ตามแต่ละประเทศ |
image_cr |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
จำกัดผลการค้นหาเฉพาะเอกสารที่มาจากประเทศที่กำหนดไว้เท่านั้น | ตามแต่ละประเทศ |
image_dominantcolor |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
จำกัดการค้นหาเฉพาะรูปภาพที่มีสีโดดเด่น
ค่าที่รองรับคือ | ตามแต่ละประเทศ |
image_filter |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
การกรองอัตโนมัติของผลการค้นหา ค่าที่รองรับ: 0/1 ตัวอย่างการใช้งาน: | ตามแต่ละประเทศ |
image_gl |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้ การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น เพิ่มผลการค้นหาที่ประเทศต้นทางตรงกับค่าพารามิเตอร์ | ตามแต่ละประเทศ |
image_size |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
แสดงรูปภาพตามขนาดที่ระบุ ซึ่งขนาดอาจเป็น | ตามแต่ละประเทศ |
image_sort_by |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
จัดเรียงผลลัพธ์โดยใช้วันที่หรือเนื้อหาที่มีโครงสร้างอื่นๆ หากต้องการจัดเรียงตามความเกี่ยวข้อง ให้ใช้สตริงว่าง (image_sort_by="") ตัวอย่างการใช้งาน: | ตามแต่ละประเทศ |
image_type |
สตริง | ใช้ได้เฉพาะเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine เท่านั้น
จำกัดการค้นหารูปภาพของประเภทที่ระบุเท่านั้น
ค่าที่รองรับ ได้แก่ | ตามแต่ละประเทศ |
ค้นเว็บ | |||
disableWebSearch |
บูลีน | หากเป็น true จะปิดการค้นหาเว็บ โดยปกติแล้วจะใช้ก็ต่อเมื่อเปิดใช้
การค้นหารูปภาพในแผงควบคุม Programmable Search Engine |
ผลการค้นหา ผลการค้นหาเท่านั้น |
webSearchQueryAddition |
สตริง | เพิ่มคำเพิ่มเติมในคำค้นหาโดยใช้ตรรกะ OR
ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
webSearchResultSetSize |
จำนวนเต็ม สตริง | ขนาดสูงสุดของชุดผลลัพธ์ มีผลกับทั้งการค้นหารูปภาพและการค้นเว็บ ค่าเริ่มต้นขึ้นอยู่กับเลย์เอาต์และการกำหนดค่า Programmable Search Engine ให้ค้นหาทั้งเว็บหรือเว็บไซต์ที่ระบุเท่านั้น ค่าที่ยอมรับมีดังนี้
|
ตามแต่ละประเทศ |
webSearchSafesearch |
สตริง |
ระบุว่าจะเปิดใช้SafeSearchสำหรับผลการค้นเว็บหรือไม่ ค่าที่ระบบยอมรับคือ off และ active
|
ตามแต่ละประเทศ |
as_filetype |
สตริง | จำกัดผลการค้นหาเฉพาะไฟล์ของนามสกุลที่ระบุ โปรดดูรายการประเภทไฟล์ที่ Google จัดทำดัชนีได้ในศูนย์ช่วยเหลือของ Search Console | ตามแต่ละประเทศ |
as_oq |
สตริง | กรองผลการค้นหาโดยใช้ Logical OR
ตัวอย่างการใช้งานหากคุณต้องการผลการค้นหาที่มี "term1" หรือ "term2": |
ตามแต่ละประเทศ |
as_rights |
สตริง | ตัวกรองตามการอนุญาตให้ใช้สิทธิ
ค่าที่รองรับคือ ดูชุดค่าผสมทั่วไปได้ที่ https://wiki.creativecommons.org/wiki/CC_Search_integration | ตามแต่ละประเทศ |
as_sitesearch |
สตริง | จำกัดผลการค้นหาเฉพาะหน้าเว็บจากเว็บไซต์ที่เจาะจง
ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
cr |
สตริง | จำกัดผลการค้นหาเฉพาะเอกสารที่มาจากประเทศที่กำหนดไว้เท่านั้น
ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
filter |
สตริง | การกรองอัตโนมัติของผลการค้นหา
ค่าที่รองรับ: 0/1 ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
gl |
สตริง | เพิ่มผลการค้นหาที่ประเทศต้นทางตรงกับค่าพารามิเตอร์
โดยจะใช้ได้กับการตั้งค่าค่าภาษาเท่านั้น ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
lr |
สตริง | จำกัดผลการค้นหาเฉพาะเอกสารที่เขียนในภาษาที่กำหนดไว้เท่านั้น
ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
sort_by |
สตริง | จัดเรียงผลลัพธ์โดยใช้วันที่หรือเนื้อหาที่มีโครงสร้างอื่นๆ ค่าแอตทริบิวต์ต้องเป็นหนึ่งในตัวเลือกที่มีในการตั้งค่าการจัดเรียงผลลัพธ์ของ Programmable Search
หากต้องการจัดเรียงตามความเกี่ยวข้อง ให้ใช้สตริงว่าง (sort_by="") ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
ผลการค้นหา | |||
enableOrderBy |
บูลีน | เปิดใช้การจัดเรียงผลการค้นหาตามความเกี่ยวข้อง วันที่ หรือป้ายกำกับ | ตามแต่ละประเทศ |
linkTarget |
สตริง | กำหนดเป้าหมายของลิงก์ ค่าเริ่มต้น: _blank |
ผลการค้นหา ผลการค้นหาเท่านั้น |
noResultsString |
สตริง | ระบุข้อความเริ่มต้นที่จะแสดงเมื่อไม่พบผลการค้นหาที่ตรงกับคำค้นหา คุณใช้สตริงผลการค้นหาเริ่มต้นเพื่อแสดงสตริงที่แปลแล้วในทุกภาษาที่รองรับได้ แต่ภาษาที่กำหนดเองจะไม่แสดง | ผลการค้นหา ผลการค้นหาเท่านั้น |
resultSetSize |
จำนวนเต็ม สตริง | ขนาดสูงสุดของชุดผลลัพธ์ เช่น large , small , filtered_cse , 10 ค่าเริ่มต้นขึ้นอยู่กับเลย์เอาต์และการกำหนดค่าเครื่องมือให้ค้นหาทั้งเว็บหรือเฉพาะเว็บไซต์ที่ระบุ |
ตามแต่ละประเทศ |
safeSearch |
สตริง | ระบุว่าจะเปิดใช้
ฟีเจอร์ค้นหาปลอดภัยสำหรับการค้นหาทั้งในเว็บและรูปภาพหรือไม่ ค่าที่ระบบยอมรับคือ off และ active |
ตามแต่ละประเทศ |
โค้ดเรียกกลับ
โค้ดเรียกกลับรองรับการควบคุมการเริ่มต้นองค์ประกอบการค้นหาและกระบวนการค้นหาโดยละเอียด
แท็กดังกล่าวมีการลงทะเบียนกับ JavaScript ในองค์ประกอบของ Search ผ่านออบเจ็กต์ __gcse
ส่วนกลาง โค้ดเรียกกลับของลงทะเบียนแสดงการลงทะเบียนของโค้ดเรียกกลับที่รองรับทั้งหมด
โค้ดเรียกกลับของการเริ่มต้น
จะมีการเรียกใช้โค้ดเรียกกลับเริ่มต้นก่อนที่ 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
ค้นหาโค้ดเรียกกลับ
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
ไปยังคำค้นหาโดยขึ้นอยู่กับช่วงเวลาของวัน
ติดตั้งโค้ดเรียกกลับนี้ใน 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
นี้เพื่อแสดงผลผลลัพธ์เอง
หากโค้ดเรียกกลับนี้แสดงค่า true
JavaScript ขององค์ประกอบ Search จะข้ามไปที่ส่วนท้ายของหน้า
โค้ดเรียกกลับที่พร้อมสําหรับตัวอย่างผลลัพธ์
โค้ดเรียกกลับ resultsReady
ในตัวอย่างในการเรียกกลับที่พร้อมสำหรับผลลัพธ์จะลบล้างการนำเสนอโปรโมชันและผลลัพธ์เริ่มต้นโดยใช้การแทนที่ที่ง่ายมาก
โค้ดเรียกกลับที่แสดงผลการค้นหารูปภาพ/เว็บ
ระบบจะเรียกใช้โค้ดเรียกกลับเหล่านี้ทันทีก่อนที่ JavaScript ขององค์ประกอบ Search จะแสดงส่วนท้ายของหน้า ตัวอย่างกรณีการใช้งานอาจรวมถึงโค้ดเรียกกลับที่เพิ่มเนื้อหาผลลัพธ์ที่องค์ประกอบการค้นหาไม่แสดง เช่น ช่องทำเครื่องหมายบันทึกรายการนี้ หรือข้อมูลที่ไม่ได้แสดงผลโดยอัตโนมัติ หรือโค้ดเรียกกลับที่เพิ่มปุ่มดูข้อมูลเพิ่มเติม
หากโค้ดเรียกกลับที่แสดงผลผลลัพธ์ต้องใช้ข้อมูลที่อยู่ในพารามิเตอร์ promos
และ results
ของโค้ดเรียกกลับที่พร้อมแสดงผลลัพธ์ ก็จะส่งผ่านค่านั้นได้ ดังนี้
callback(gname, query, promoElts, resultElts);
gname
- สตริงการระบุขององค์ประกอบ Search
query
- สตริงการค้นหา
promoElts
- อาร์เรย์ขององค์ประกอบ DOM ที่มีโปรโมชัน
resultElts
- อาร์เรย์ขององค์ประกอบ DOM ที่มีผลลัพธ์
ไม่มีค่าผลลัพธ์
ตัวอย่างผลลัพธ์ที่แสดงโค้ดเรียกกลับ
ตัวอย่างโค้ดเรียกกลับ resultsRendered
ใน ตัวอย่างการเรียกกลับที่แสดงผล จะเพิ่มช่องทำเครื่องหมาย Keep จำลองลงในโปรโมชันและผลลัพธ์แต่ละรายการ
หากโค้ดเรียกกลับที่แสดงผลผลลัพธ์ต้องใช้ข้อมูลที่ส่งไปยังโค้ดเรียกกลับที่พร้อมแสดงผลลัพธ์ ก็จะส่งข้อมูลนั้นระหว่างโค้ดเรียกกลับได้ ตัวอย่างต่อไปนี้แสดงวิธีใดวิธีหนึ่งในการส่งค่าการให้คะแนนจาก richSnippet
จากโค้ดเรียกกลับที่พร้อมแสดงผลลัพธ์ไปยังโค้ดเรียกกลับที่แสดงผล
ตัวอย่างการติดต่อกลับเพิ่มเติม
ดูตัวอย่างการติดต่อกลับเพิ่มเติมได้ในเอกสารตัวอย่างการติดต่อกลับเพิ่มเติม
พร็อพเพอร์ตี้ผลการค้นหาที่ได้รับการสนับสนุนและผลลัพธ์
การใช้เครื่องหมาย JSDoc จะระบุพร็อพเพอร์ตี้ของออบเจ็กต์ promotion และ result เหล่านี้ ในส่วนนี้ เราจะแสดงรายการพร็อพเพอร์ตี้ทั้งหมดที่อาจมีอยู่ การแสดงที่พักจำนวนมากจะขึ้นอยู่กับรายละเอียดของโปรโมชันหรือผลการค้นหา
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
พารามิเตอร์
|
||||||
.go(opt_container) |
แสดงผลแท็ก/คลาสองค์ประกอบของ Search ทั้งหมดในคอนเทนเนอร์ที่ระบุ
พารามิเตอร์
|
||||||
.getElement(gname) |
รับออบเจ็กต์องค์ประกอบภายใน gname หากไม่พบ ให้แสดงผลเป็น Null
ออบเจ็กต์
โค้ดต่อไปนี้จะเรียกทำการค้นหา "news" ในองค์ประกอบการค้นหา "element1": var element = google.search.cse.element.getElement('element1'); element.execute('news'); |
||||||
.getAllElements() |
แสดงผลแผนที่ของออบเจ็กต์องค์ประกอบที่สร้างเสร็จสมบูรณ์ทั้งหมด ซึ่งคีย์โดย gname |