คุณสามารถฝังคอมโพเนนต์ 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 รายการมีคอมโพเนนต์เดียวกัน
|
ตามแต่ละประเทศ |
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 ว่าคุณต้องการอนุญาต โฆษณาที่ใช้คุกกี้สำหรับการเข้าชมที่ไม่ถูกต้องเท่านั้นและ พื้นที่เก็บข้อมูลในเครื่องทั้งที่ได้รับความยินยอมและ การเข้าชมที่ไม่ได้รับความยินยอม
ค่าเริ่มต้น: ตัวอย่างการใช้งาน: |
ผลการค้นหา searchresults-only |
mobileLayout |
สตริง |
ระบุว่าควรใช้รูปแบบเลย์เอาต์สำหรับอุปกรณ์เคลื่อนที่สำหรับอุปกรณ์เคลื่อนที่หรือไม่
ค่าเริ่มต้น: ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
เติมข้อความอัตโนมัติ | |||
enableAutoComplete |
บูลีน | ใช้ได้เฉพาะเมื่อเปิดใช้การเติมข้อความอัตโนมัติในแผงควบคุม Programmable Search Engine เท่านั้น
true เปิดใช้การเติมข้อความอัตโนมัติ |
ตามแต่ละประเทศ |
autoCompleteMaxCompletions |
จำนวนเต็ม | จำนวนการเติมข้อความอัตโนมัติสูงสุดที่จะแสดง | ช่องค้นหา ช่องค้นหาเท่านั้น |
autoCompleteMaxPromotions |
จำนวนเต็ม | จำนวนโปรโมชันสูงสุดที่จะแสดงในการเติมข้อความอัตโนมัติ | ช่องค้นหา ช่องค้นหาเท่านั้น |
autoCompleteValidLanguages |
สตริง | รายการภาษาที่คั่นด้วยคอมมาสำหรับการเติมข้อมูลอัตโนมัติ เปิดอยู่ ภาษาที่รองรับ | ช่องค้นหา ช่องค้นหาเท่านั้น |
การปรับเกณฑ์การค้นหา | |||
defaultToRefinement |
สตริง | ใช้ได้ต่อเมื่อมีการสร้างการปรับเกณฑ์การค้นหาใน แผงควบคุม Programmable Search Engine ระบุป้ายกำกับการปรับแต่งเริ่มต้นเป็น display.หมายเหตุ: เค้าโครงที่ Google โฮสต์ไม่รองรับแอตทริบิวต์นี้ | ตามแต่ละประเทศ |
refinementStyle |
สตริง | ค่าที่ยอมรับได้คือ tab (ค่าเริ่มต้น) และ link
จะรองรับ link ก็ต่อเมื่อปิดการค้นหารูปภาพไว้ หรือเมื่อ
เปิดใช้งานการค้นหารูปภาพ แต่การค้นหาเว็บถูกปิดใช้งาน |
ผลการค้นหา searchresults-only |
การค้นหารูปภาพ | |||
enableImageSearch |
บูลีน | ใช้ได้เฉพาะเมื่อ
การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว
หากเป็น |
ผลการค้นหา searchresults-only |
defaultToImageSearch |
บูลีน | ใช้ได้เฉพาะเมื่อ
การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว
หาก |
ตามแต่ละประเทศ |
imageSearchLayout |
สตริง | ใช้ได้เฉพาะเมื่อ
การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว
ระบุเลย์เอาต์ของหน้าผลการค้นหารูปภาพ ค่าที่ยอมรับได้
คือ |
ผลการค้นหา searchresults-only |
imageSearchResultSetSize |
จำนวนเต็ม, สตริง | ใช้ได้เฉพาะเมื่อ
การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว
ระบุขนาดสูงสุดของผลการค้นหาที่ตั้งค่าสำหรับการค้นหารูปภาพ
เช่น |
ตามแต่ละประเทศ |
image_as_filetype |
สตริง | ใช้ได้เฉพาะเมื่อ
การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว
จำกัดผลการค้นหาเฉพาะไฟล์ที่มีนามสกุลที่ระบุ ส่วนขยายที่รองรับ ได้แก่ | ตามแต่ละประเทศ |
image_as_oq |
สตริง | ใช้ได้เฉพาะเมื่อ
การค้นหารูปภาพเปิดอยู่ในแผงควบคุม Programmable Search Engine แล้ว
กรองผลการค้นหาโดยใช้ตรรกะ 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 แล้ว |
ผลการค้นหา searchresults-only |
webSearchQueryAddition |
สตริง | คำพิเศษที่เพิ่มในคำค้นหาโดยใช้ตรรกะ OR
ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
webSearchResultSetSize |
จำนวนเต็ม, สตริง | ขนาดสูงสุดของชุดผลลัพธ์ ใช้กับ
ทั้งการค้นหารูปภาพ
และการค้นหาเว็บ ค่าเริ่มต้นจะขึ้นอยู่กับการจัดวางและ
มีการกำหนดค่า Programmable Search Engine เพื่อค้นหาทั้งเว็บหรือระบุไว้เท่านั้น
เว็บไซต์ ค่าที่ยอมรับได้ มีดังนี้
|
ตามแต่ละประเทศ |
webSearchSafesearch |
สตริง |
ระบุว่า
SafeSearchคือ
สำหรับผลการค้นเว็บ ค่าที่ยอมรับคือ off และ active
|
ตามแต่ละประเทศ |
as_filetype |
สตริง | จำกัดผลการค้นหาเฉพาะไฟล์ที่มีนามสกุลที่ระบุ ดูรายการประเภทไฟล์ที่ Google จัดทำดัชนีได้ในศูนย์ช่วยเหลือของ Search Console | ตามแต่ละประเทศ |
as_oq |
สตริง | กรองผลการค้นหาโดยใช้ตรรกะ 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 egnine
หากต้องการจัดเรียงตามความเกี่ยวข้อง ให้ใช้สตริงว่าง (sort_by="") ตัวอย่างการใช้งาน: |
ตามแต่ละประเทศ |
ผลการค้นหา | |||
enableOrderBy |
บูลีน | เปิดใช้งานการจัดเรียงผลลัพธ์ตามความเกี่ยวข้อง วันที่ หรือป้ายกำกับ | ตามแต่ละประเทศ |
linkTarget |
สตริง | กำหนดเป้าหมายของลิงก์ ค่าเริ่มต้น: _blank |
ผลการค้นหา searchresults-only |
noResultsString |
สตริง | ระบุข้อความเริ่มต้นที่จะแสดงเมื่อไม่พบผลลัพธ์ที่ตรงกับข้อความค้นหา สตริงผลลัพธ์เริ่มต้นสามารถใช้เพื่อแสดงสตริงที่แปลแล้วในทุก ภาษาที่รองรับ แต่ภาษาที่กำหนดเองไม่มี | ผลการค้นหา searchresults-only |
resultSetSize |
จำนวนเต็ม, สตริง | ขนาดสูงสุดของชุดผลลัพธ์ เช่น large
small , filtered_cse , 10
ค่าเริ่มต้นขึ้นอยู่กับเลย์เอาต์และมีการกำหนดค่าเครื่องมือให้ค้นหาหรือไม่
ทั้งเว็บหรือเฉพาะเว็บไซต์ที่ระบุ |
ตามแต่ละประเทศ |
safeSearch |
สตริง | ระบุว่า
ฟีเจอร์ค้นหาปลอดภัยเปิดอยู่สำหรับทั้งการค้นหาเว็บและรูปภาพ ค่าที่ยอมรับคือ off
และ active |
ตามแต่ละประเทศ |
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>
ที่มีค่ารหัส
ตำแหน่งที่เราต้องการโค้ดองค์ประกอบของการค้นหา:
<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 จะลบล้างงานนำเสนอเริ่มต้น
โปรโมชันและผลลัพธ์ด้วยการแทนที่ที่ง่ายดาย
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 จำลอง
ในช่องการโปรโมตและผลการค้นหาแต่ละรายการ
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
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) |
แสดงผลองค์ประกอบของการค้นหา
พารามิเตอร์
|
||||||
.go(opt_container) |
แสดงแท็ก/คลาสองค์ประกอบการค้นหาทั้งหมดในคอนเทนเนอร์ที่ระบุ
พารามิเตอร์
|
||||||
.getElement(gname) |
รับออบเจ็กต์องค์ประกอบภายใน gname หากไม่พบ ให้แสดงผลเป็นค่าว่าง
ออบเจ็กต์
โค้ดต่อไปนี้เรียกใช้คำค้นหา "news" ในองค์ประกอบการค้นหา "องค์ประกอบ1": var element = google.search.cse.element.getElement('element1'); element.execute('news'); |
||||||
.getAllElements() |
แสดงแผนที่ของออบเจ็กต์องค์ประกอบที่สร้างสำเร็จทั้งหมด คีย์โดย gname |