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