วิดเจ็ต Search ของกราฟความรู้

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

ตัวอย่างวิดเจ็ต Search

ฟีเจอร์

  • ข้ามเบราว์เซอร์ - เขียนด้วยการปิดที่ได้รับการทดสอบอย่างดีและข้ามเบราว์เซอร์ และคอมไพล์เป็น JavaScript ล้วนๆ
  • ข้ามโดเมน ไม่ต้องใช้พร็อกซีเซิร์ฟเวอร์ด้วย JSONP
  • โฮสต์บนเซิร์ฟเวอร์ Google
  • ฟรี! (ต้องเป็นไปตามข้อกำหนดมาตรฐานของ Google API)

ลองใช้เลย

เหตุใดจึงควรใช้วิดเจ็ต Search กราฟความรู้

  • อนุญาตให้ผู้ใช้พิมพ์น้อยลงเพื่อป้อนข้อมูลเพิ่มเติม
  • ทำให้การป้อนข้อมูลง่ายและแม่นยำมากขึ้น
  • ลดภาระทางความคิดของผู้ใช้ด้วยการแสดงรูปภาพและคำอธิบาย
  • หลีกเลี่ยงการใช้ชื่อซ้ำสำหรับบุคคลเดียวกัน: Puff Daddy, P. Diddy, Sean Combs ทุกคนต่างพูดถึง /en/sean_combs

การเพิ่มวิดเจ็ต Search ของกราฟความรู้ลงในเว็บไซต์ของคุณ

หากต้องการเพิ่มวิดเจ็ต Search ของกราฟความรู้ลงในหน้าเว็บ ให้ใส่ข้อมูลต่อไปนี้ ในซอร์สโค้ดของเว็บไซต์ คุณจะต้องใช้ คีย์ API เพื่อให้วิดเจ็ตเข้าถึง Google Knowledge Graph API ได้

โค้ดที่จะใส่ไว้ในเว็บไซต์ของคุณ

รวมข้อมูลต่อไปนี้ใน <head> ของเอกสาร HTML ของคุณ:

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.css">
<style>
  .kge-search-picker {
    width: <DROPDOWN_MENU_WIDTH>;
  }
</style>
<script type="text/javascript" src="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.js"></script>

จากนั้นใช้ช่องป้อนข้อมูลที่มีองค์ประกอบ <body> ในเอกสาร รหัสที่ตรงกัน ดังนี้

<input type="text" id="myInput">
<script type="text/javascript">
  KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>

การรับและการใช้คีย์ API

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

เมื่อได้รับคีย์แล้ว ให้ส่งต่อไปยังวิดเจ็ต Search กราฟความรู้โดยใช้ ดังนี้

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});

การกำหนดค่าวิดเจ็ต Search

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

การส่งผ่านออบเจ็กต์การกำหนดค่า

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

var config = {
  'limit': 10,
  'languages': ['en', 'fr'],
  'types': ['Person', 'Movie'],
  'maxDescChars': 100,
};
config['selectHandler'] = function(e) {
  alert(e.row.name + ' selected');
};
config['highlightHandler'] = function(e) {
  alert(e.row.name + ' highlighted');
};
KGSearchWidget(<API_KEY>, document.getElementById('myInput'), config);

ตัวเลือกการกำหนดค่า

ตารางต่อไปนี้จะอธิบายตัวเลือกการกำหนดค่าที่คุณส่งไปยัง วิดเจ็ต Search ของกราฟความรู้

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
ภาษา อาร์เรย์(สตริง) อังกฤษ รายการรหัสภาษา (ที่กำหนดไว้ใน ISO 639-1) ที่ทำให้ทำการค้นหาในทุกภาษา ที่ระบุ ผลการค้นหาจะจัดอันดับเป็นภาษาแรกที่แสดง แสดงเป็นภาษาแรกในรายการที่มีชื่อสำหรับ เอนทิตี ภาษาอังกฤษครอบคลุมมากที่สุด ค่านี้เป็นแบบโปร่งใส ที่ส่งไปยัง Search API
เช่น หากตั้งค่าภาษาเป็น [fr, en], the widget will show descriptions for entities in the primary language, French, when possible. Otherwise, it will fall back to English as a secondary language.
ขีดจำกัด จำนวนเต็ม 20 จำนวนผลลัพธ์สูงสุดในเมนูแบบเลื่อนลง
ประเภท อาร์เรย์(สตริง) ทุกประเภท แสดงผลเฉพาะเอนทิตีที่ตรงกับรายการใดก็ได้ที่ระบุ เอนทิตี ประเภทต่างๆ หากไม่ระบุพารามิเตอร์นี้ ระบบจะแสดงการจับคู่ที่ตรงกันของเอนทิตีประเภทใดก็ได้
maxDescChars จำนวนเต็ม ไม่จำกัด จำนวนอักขระสูงสุดในคำอธิบายโดยละเอียดของแต่ละเอนทิตี เนื้อหาที่ยาวกว่า maxDescChars จะถูกตัดออก
selectHandler ฟังก์ชัน Null ฟังก์ชัน Callback ที่จะเรียกใช้เมื่อมีการเลือกแถว อาร์กิวเมนต์ของ ฟังก์ชัน Callback เป็นเหตุการณ์และมีแอตทริบิวต์ row ที่มีข้อมูลเกี่ยวกับแถวที่เลือกไว้ โปรดดู การใช้เครื่องจัดการเหตุการณ์ เป็นตัวอย่างของการใช้ Callback นี้
highlightHandler ฟังก์ชัน Null ฟังก์ชัน Callback ที่เรียกใช้เมื่อผู้ใช้วางเมาส์เหนือแถว อาร์กิวเมนต์ของฟังก์ชัน Callback คือเหตุการณ์ และ แอตทริบิวต์ row ที่มีข้อมูลเกี่ยวกับแถวที่ ที่เลือกไว้
โปรดทราบว่าอุปกรณ์หลายประเภท (เช่น ฮาร์ดแวร์มือถือแบบหน้าจอสัมผัส) ไม่สามารถ สร้างเหตุการณ์นี้
ดูการใช้เครื่องจัดการเหตุการณ์ เป็นตัวอย่างของการใช้ Callback นี้

การติดตั้งใช้งานเครื่องจัดการเหตุการณ์

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

selectHandler — เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้เลือกรายการ จากรายการ Suggest เหตุการณ์มาพร้อมกับออบเจ็กต์ข้อมูล event.row คือข้อมูลของแถวที่เลือก event.row.name และ event.row.id เป็นตัวแทนของชื่อและ รหัสของรายการที่เลือก ส่วนย่อยของโค้ดต่อไปนี้จะแสดงวิธีที่คุณสามารถทดสอบ selectHandler มี

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
  "selectHandler": function(e) {
    alert("selected " + e.row.name);
  }
});

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

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
  "highlightHandler": function(e) {
    alert("highlighted " + e.row.name);
  }
});

ความช่วยเหลือและความคิดเห็น

หากคุณมีคำถาม รายงานข้อบกพร่อง หรือความคิดเห็นเกี่ยวกับ API การค้นหากราฟความรู้ ให้ใช้ ฟอรัมความช่วยเหลือ