ווידג'ט חיפוש של Knowledge Graph

ווידג'ט החיפוש של Knowledge Graph הוא מודול JavaScript שעוזר להוסיף נושאים לתיבות קלט באתר שלכם. המשתמשים מתחילים להקליד טקסט, והווידג'ט מוצא התאמות רלוונטיות תוך כדי הקלדה, באמצעות ממשק ה-API לחיפוש של Knowledge Graph.

דוגמה לווידג'ט חיפוש

תכונות

  • דפדפן חוצה - הוא כתוב בסגירת דפדפן שנבדקה היטב ועבר הידור ל-JavaScript טהור.
  • מספר דומיינים. הודות ל-JSONP, לא נדרשים שרתי proxy.
  • מתארח בשרתי Google.
  • חינם! (בכפוף לתנאים הרגילים של Google API.)

רוצים לנסות?

למה כדאי להשתמש בווידג'ט החיפוש של Knowledge Graph?

  • המשתמשים יכולים להקליד פחות כדי להזין יותר נתונים.
  • הזנת נתונים קלה ומדויקת יותר.
  • הפחתת העומס הקוגניטיבי על המשתמשים על ידי הוספת תמונות ותיאורים.
  • צריך להימנע מכפילויות של שמות עבור אותה יישות: Puff Daddy, P. דידי, שון קומבס מתייחס ל/en/sean_combs.

הוספת ווידג'ט החיפוש של Knowledge Graph לאתר

כדי להוסיף את ווידג'ט החיפוש של Knowledge Graph לדף, צריך לכלול את הקוד הבא במקור האתר. תצטרכו להשתמש במפתח API כדי שהווידג'ט יוכל לגשת לממשק ה-API של Google Knowledge Graph.

קוד להכללה באתר

יש לכלול את הפרטים הבאים ב-<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 מאפשרת לאפליקציה לשלוח בקשות ל-Google Suggest. הווידג'ט לא יפעל בלי מפתח API. אם עדיין אין לכם מפתח API, תוכלו לרכוש מפתח כזה לפי ההוראות המפורטות בדף Prequis (דרישות המוקדמות).

אחרי שמקבלים מפתח, מעבירים אותו לווידג'ט החיפוש של Knowledge Graph באמצעות קוד כמו בדוגמה הבאה:

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

הגדרת ווידג'ט החיפוש

JavaScript יכול לקרוא ל-KGSearchWidget() עם ארגומנט שלישי ריק, כפי שמוצג למעלה. לחלופין, תוכלו להשתמש בארגומנט השלישי כדי להעביר באובייקט הגדרה, ולציין מסננים שונים, אילוצים וגורמים מטפלים באירועים.

העברת אובייקט config

ווידג'ט החיפוש של Knowledge Graph מקבל פרמטר אופציונלי של הגדרה. כך תוכלו לאכלס מבנה נתונים במספר אפשרויות הגדרה, ולהעביר אותו לווידג'ט כפי שמוצג בדוגמה הבאה.

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

אפשרויות הגדרה

בטבלה הבאה מתוארות אפשרויות ההגדרה שאפשר להעביר לווידג'ט החיפוש של Knowledge Graph.

שם תיאור ברירת המחדל התיאור
שפות מערך(מחרוזת) אנגלית רשימה של קודי שפות (מוגדרים בתקן 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) הוא אירוע, והוא כולל מאפיין row שמכיל מידע על השורה שנבחרה. כדי לראות דוגמה לשימוש בקריאה החוזרת (callback), אפשר לעיין במאמר שימוש בגורמים מטפלים באירועים.
highlightHandler פעולה null פונקציית הקריאה החוזרת שמופעלת כשהמשתמש מעביר את סמן העכבר מעל השורה. הארגומנט של פונקציית הקריאה החוזרת הוא אירוע, והוא כולל מאפיין row שמכיל מידע על השורה שנבחרה.
חשוב לזכור שלא ניתן ליצור את האירוע הזה במכשירים רבים (כמו חומרה עם מסך מגע).
אפשר לראות דוגמה לשימוש בקריאה החוזרת (callback) במאמר שימוש בגורמים מטפלים באירועים.

הטמעה של גורמים מטפלים באירועים

ווידג'ט החיפוש של Knowledge Graph מפעיל את האירועים הבאים בהקשר של הקלט שאיתו הוא הופעל. אפשר לספק פונקציות קריאה חוזרת ב-config כדי להטמיע handlers לאירועים האלה.

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

עזרה ומשוב

אם יש לכם שאלות, דוחות על באגים או משוב לגבי ה-Knowledge Graph Search API, השתמשו בפורום העזרה.