การใช้งานช่องค้นหา

เมื่อสร้าง Programmable Search Engine แล้ว คุณจะเพิ่ม Programmable Search Element ในเว็บไซต์ได้ ในการดำเนินการดังกล่าว คุณจะต้องคัดลอกโค้ดบางส่วนแล้ววางลงใน HTML ของเว็บไซต์ในตำแหน่งที่คุณต้องการให้เครื่องมือค้นหาปรากฏ

  1. ในแผงควบคุม ให้คลิกเครื่องมือค้นหาที่ต้องการใช้
  2. ในส่วนพื้นฐานของหน้าภาพรวม ให้คลิกรับโค้ด คัดลอกโค้ดแล้ววางลงในซอร์สโค้ด HTML ของหน้าเว็บในตำแหน่งที่ต้องการให้ Programmable Search Element ปรากฏ

องค์ประกอบ <div class="gcse-search"></div> เป็นตัวยึดตำแหน่ง - นี่คือตำแหน่งที่องค์ประกอบการค้นหา (ทั้งช่องค้นหาและผลการค้นหา) จะแสดงผล

<!-- ใส่รหัส Programmable Search Engine ของคุณเองที่นี่ --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

การลองใช้เลย์เอาต์แบบต่างๆ

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

หากต้องการเปลี่ยนการจัดวางเครื่องมือ ให้ไปที่ส่วนการออกแบบของหน้ารูปลักษณ์ในแผงควบคุม หลังจากเลือกและบันทึกรูปแบบ 2 คอลัมน์ในแผงควบคุมแล้ว คุณจะต้องเปลี่ยนโค้ด HTML สำหรับองค์ประกอบการค้นหาด้วย

<!-- ใส่รหัส Programmable Search Engine ของคุณเองที่นี่ --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <div class="gcse-searchbox"></div>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <div class="gcse-searchresults"></div>
</div>

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

เลือกและบันทึกรูปแบบ 2 หน้าในแผงควบคุม ใช้ช่องค้นหาแบบสแตนด์อโลนในหน้าเดียว โดยเปลี่ยนแอตทริบิวต์ resultsUrl ให้ชี้ไปยัง URL ที่ต้องการแสดงผลลัพธ์

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>

ลองใช้

หากต้องการใช้หน้าผลการค้นหาแบบสแตนด์อโลน ให้วางข้อมูลโค้ดของผลลัพธ์ในหน้าผลการค้นหาของคุณ:

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

ตอนนี้คุณสามารถเรียกผลการค้นหาในหน้านี้โดยการส่งผ่าน "q" อาร์กิวเมนต์ใน URL

https://my-results-page-url.com/?q=myQuery

โปรดสังเกตพารามิเตอร์ q=myQuery ในแถบที่อยู่ ซึ่งเป็นวิธีที่องค์ประกอบ <div class="gcse-searchresults-only"></div> รู้ว่าจะแสดงผลการค้นหาใด

ลองใช้

ถัดไป...

ดำเนินการต่อไปยังการเปิดใช้การเติมข้อความอัตโนมัติ