ویجت جستجوی نمودار دانش

ویجت جستجوی نمودار دانش یک ماژول جاوا اسکریپت است که به شما کمک می کند موضوعات را به کادرهای ورودی سایت خود اضافه کنید. کاربران شروع به تایپ متن می کنند و ویجت با استفاده از API جستجوی نمودار دانش، مطابقت های مرتبط را در حین تایپ پیدا می کند.

نمونه ویجت جستجو

امکانات

  • مرورگر متقاطع - در بسته شدن به خوبی تست شده و بین مرورگر نوشته شده و به جاوا اسکریپت خالص کامپایل شده است.
  • متقابل دامنه. به لطف JSONP نیازی به سرورهای پروکسی نیست.
  • بر روی سرورهای گوگل میزبانی می شود.
  • رایگان! ( شرایط استاندارد Google API اعمال می شود.)

آن را امتحان کنید!

چرا از ویجت جستجوی نمودار دانش استفاده کنیم؟

  • به کاربران خود اجازه دهید کمتر تایپ کنند تا داده های بیشتری وارد کنند.
  • ورود داده ها را آسان تر و دقیق تر کنید.
  • با ارائه تصاویر و توضیحات، بار شناختی کاربران خود را کاهش دهید.
  • از نام‌های تکراری برای یک موجودیت خودداری کنید: Puff Daddy، P. Diddy، Sean Combs همگی به /en/sean_combs اشاره می‌کنند.

افزودن ویجت جستجوی نمودار دانش به وب سایت شما

برای افزودن ویجت جستجوی نمودار دانش به یک صفحه، کد زیر را در منبع وب سایت خود قرار دهید. شما باید از یک کلید API استفاده کنید تا ویجت بتواند به API Graph Knowledge 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>

دریافت و استفاده از یک کلید API

به دست آوردن یک کلید API به برنامه شما اجازه می دهد تا درخواست های پیشنهادی را ارائه دهد. بدون کلید API، ویجت کار نخواهد کرد. اگر قبلاً یک کلید API ندارید، دستورالعمل‌های صفحه پیش نیازها را دنبال کنید تا یکی را دریافت کنید.

پس از دریافت کلید، آن را با استفاده از کدهایی مانند زیر به ویجت جستجوی نمودار دانش ارسال کنید:

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

پیکربندی ویجت جستجو

جاوا اسکریپت شما می تواند 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);

گزینه های پیکربندی

جدول زیر گزینه های پیکربندی را توضیح می دهد که می توانید به ویجت جستجوی نمودار دانش منتقل کنید.

نام تایپ کنید پیش فرض شرح
زبان ها آرایه (رشته) انگلیسی فهرستی از کدهای زبان (تعریف شده در 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 کوتاه می شود.
انتخابگر تابع خالی عملکرد پاسخ به تماس برای تماس زمانی که یک ردیف انتخاب شده است. آرگومان تابع callback یک رویداد است و شامل یک صفت row است که حاوی اطلاعاتی درباره سطر انتخاب شده است. برای مثالی از استفاده از این پاسخ به تماس ، استفاده از کنترل کننده رویداد را ببینید.
highlight Handler تابع خالی تابع callback که وقتی کاربر روی ردیف قرار می گیرد فراخوانی می شود. آرگومان تابع callback یک رویداد است و شامل یک صفت 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);
  }
});

کمک و بازخورد

اگر سؤال، گزارش اشکال یا بازخوردی در مورد API جستجوی نمودار دانش دارید، از تالار گفتمان راهنمایی استفاده کنید.