أداة بحث الرسم البياني المعرفي

"أداة بحث الرسم البياني المعرفي" هي وحدة من وحدات JavaScript تساعدك على إضافة مواضيع إلى مربّعات الإدخال على موقعك الإلكتروني. يبدأ المستخدمون في كتابة النص وتعثر الأداة على مطابقات ذات صلة أثناء الكتابة باستخدام واجهة برمجة تطبيقات بحث الرسم البياني المعرفي.

مثال على أداة "بحث Google"

الميزات

  • على جميع المتصفّحات: تتم كتابة هذا الإعداد باستخدام أسلوب إغلاق تم اختباره بشكلٍ جيد على جميع المتصفّحات، كما يتم تجميعه في JavaScript بشكلٍ كامل.
  • عبر النطاقات. ليست هناك حاجة إلى خوادم وكيلة بفضل JSONP.
  • مستضافة على خوادم Google
  • مجانا! (تنطبق بنود Google API العادية.)

جرِّب بنفسك.

مزايا استخدام تطبيق بحث الرسم البياني المعرفي

  • اسمح للمستخدمين بكتابة بيانات أقل لإدخال المزيد من البيانات.
  • جعل عملية إدخال البيانات أسهل وأكثر دقة.
  • تقليل العبء المعرفي للمستخدمين من خلال توفير الصور والأوصاف.
  • تجنَّب استخدام الأسماء المكرّرة للكيان نفسه: Puff Daddy وP. ديدي وشون كومز يشيران جميعًا إلى /en/sean_combs.

إضافة أداة بحث الرسم البياني المعرفي إلى موقعك الإلكتروني

لإضافة أداة بحث الرسم البياني المعرفي إلى صفحة، يمكنك تضمين الرمز التالي في مصدر موقعك الإلكتروني. يجب استخدام مفتاح واجهة برمجة التطبيقات لكي تتمكّن الأداة من الوصول إلى واجهة برمجة التطبيقات للرسم البياني المعرفي من Google.

رمز يجب تضمينه في موقعك الإلكتروني

يُرجى تضمين ما يلي في <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>

الحصول على مفتاح واجهة برمجة التطبيقات واستخدامه

يتيح الحصول على مفتاح واجهة برمجة التطبيقات لتطبيقك إنشاء طلبات "اقتراح". بدون مفتاح واجهة برمجة التطبيقات، لن تعمل الأداة. إذا لم يكن لديك مفتاح واجهة برمجة تطبيقات، يُرجى اتّباع التعليمات الواردة في صفحة المتطلبات الأساسية للحصول عليه.

عند الحصول على المفتاح، مرِّره إلى أداة بحث الرسم البياني المعرفي باستخدام رمز مثل ما يلي:

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

ضبط تطبيق "بحث Google" المصغّر

يمكن لـ JavaScript استدعاء KGSearchWidget() مع وسيطة ثالثة فارغة كما هو موضّح أعلاه. أو يمكنك استخدام هذه الوسيطة الثالثة لتمرير كائن تهيئة، مع تحديد العديد من عوامل التصفية والقيود ومعالجات الأحداث.

تمرير كائن إعداد

تقبل أداة بحث الرسم البياني المعرفي مَعلمة إعداد اختيارية. ويتيح لك ذلك تعبئة بنية بيانات بخيارات تهيئة متعددة، وتمريرها إلى الأداة كما هو موضح في المثال التالي.

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 عدد صحيح غير محدودة تمثّل هذه السمة الحد الأقصى لعدد الأحرف في الوصف التفصيلي لكل كيان. سيتم اقتطاع المحتوى الذي يزيد عن maxDescars.
selectHandler الوظيفة null دالة رد الاتصال المطلوب استدعاءها عند اختيار صف. وسيطة دالة الاستدعاء هي حدث، وتتضمّن السمة row التي تحتوي على معلومات عن الصف الذي تم اختياره. راجِع استخدام معالِجات الأحداث للاطّلاع على مثال على استخدام معاودة الاتصال هذه.
highlightHandler الوظيفة null يشير ذلك المصطلح إلى دالة رد الاتصال التي يتم استدعاؤها عندما يمرِّر المستخدِم مؤشر الماوس فوق الصف. وسيطة دالة رد الاتصال هي حدث، وتتضمّن السمة row التي تحتوي على معلومات حول الصف الذي تم اختياره.
يُرجى العلم أنّ العديد من الأجهزة (مثل أجهزة الجوّال التي تعمل باللمس) لا يمكن إنشاء هذا الحدث فيها.
راجِع استخدام معالِجات الأحداث للاطّلاع على مثال على استخدام معاودة الاتصال هذه.

تنفيذ معالِجات الأحداث

تؤدي أداة بحث الرسم البياني المعرفي إلى تشغيل الأحداث التالية ضمن سياق الإدخال الذي تم إعداده من خلاله. يمكنك توفير دوال استدعاء في كائن config لتنفيذ معالجات هذه الأحداث.

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

المساعدة والملاحظات

إذا كانت لديك أسئلة أو تقارير أخطاء أو ملاحظات حول واجهة برمجة تطبيقات بحث الرسم البياني المعرفي، يمكنك استخدام منتدى المساعدة.