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

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

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

ฟีเจอร์

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

ลองใช้เลย

เหตุผลที่ควรใช้วิดเจ็ตการค้นหาของกราฟความรู้

  • ให้ผู้ใช้พิมพ์น้อยลงเพื่อป้อนข้อมูลเพิ่มเติม
  • ทำให้การป้อนข้อมูลง่ายและแม่นยำขึ้น
  • ลดภาระทางความคิดของผู้ใช้ด้วยการใส่รูปภาพและคำอธิบาย
  • หลีกเลี่ยงการใช้ชื่อซ้ำสำหรับเอนทิตีเดียวกัน: 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 จะช่วยให้แอปพลิเคชันของคุณสร้างคำขอ Suggest ได้ หากไม่มีคีย์ API วิดเจ็ตจะไม่ทำงาน หากยังไม่มีคีย์ API โปรดทำตามวิธีการในหน้าข้อกำหนดเบื้องต้นเพื่อรับคีย์ดังกล่าว

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

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

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

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

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

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

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

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

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

ชื่อ Type ค่าเริ่มต้น คำอธิบาย
ภาษา อาร์เรย์(สตริง) อังกฤษ รายการรหัสภาษา (กำหนดไว้ใน 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 ฟังก์ชันเรียกกลับที่จะเรียกใช้เมื่อเลือกแถว อาร์กิวเมนต์ของฟังก์ชันเรียกกลับคือเหตุการณ์ และประกอบด้วยแอตทริบิวต์ row ที่มีข้อมูลเกี่ยวกับแถวที่เลือก ดูการใช้เครื่องจัดการเหตุการณ์เพื่อดูตัวอย่างการใช้โค้ดเรียกกลับนี้
highlightHandler การทำงาน null ฟังก์ชันเรียกกลับที่จะเรียกใช้เมื่อผู้ใช้วางเมาส์เหนือแถว อาร์กิวเมนต์ของฟังก์ชันเรียกกลับคือเหตุการณ์ และมีแอตทริบิวต์ row ที่มีข้อมูลเกี่ยวกับแถวที่เลือก
โปรดทราบว่าอุปกรณ์จำนวนมาก (เช่น ฮาร์ดแวร์อุปกรณ์เคลื่อนที่หน้าจอสัมผัส) ไม่สามารถสร้างเหตุการณ์นี้ได้
ดูการใช้ตัวแฮนเดิลเหตุการณ์เพื่อดูตัวอย่างการใช้โค้ดเรียกกลับนี้

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

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

selectHandler — เหตุการณ์นี้ทริกเกอร์เมื่อผู้ใช้เลือกรายการจากรายการคำแนะนำ เหตุการณ์จะแสดงพร้อมกับออบเจ็กต์ข้อมูลโดยที่ 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);
  }
});

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

หากมีคำถาม รายงานข้อบกพร่อง หรือความคิดเห็นเกี่ยวกับ Knowledge Graph Search API โปรดใช้ฟอรัมความช่วยเหลือ