नॉलेज ग्राफ़ खोज विजेट

नॉलेज ग्राफ़ सर्च विजेट एक JavaScript मॉड्यूल है, जो आपकी साइट के इनपुट बॉक्स में विषय जोड़ने में आपकी मदद करता है. उपयोगकर्ता टेक्स्ट टाइप करना शुरू करते हैं और विजेट, नॉलेज ग्राफ़ सर्च एपीआई का इस्तेमाल करते हुए उनके टाइप करते ही प्रासंगिक मिलान ढूंढता है.

Search विजेट का उदाहरण

सुविधाएं

  • क्रॉस ब्राउज़र - यह अच्छी तरह से जांचा गया और क्रॉस-ब्राउज़र बंद है और इसे पूरी तरह JavaScript से इकट्ठा किया गया है.
  • क्रॉस-डोमेन. JSONP को इस्तेमाल करने के लिए, किसी प्रॉक्सी सर्वर की ज़रूरत नहीं है.
  • Google के सर्वर पर होस्ट किया गया.
  • मुफ़्त! (Google API की मानक शर्तें लागू होती हैं.)

इसे आज़माएं!

नॉलेज ग्राफ़ सर्च विजेट का इस्तेमाल क्यों करना चाहिए?

  • उपयोगकर्ताओं को ज़्यादा डेटा डालने के लिए, कम टाइप करने की अनुमति दें.
  • डेटा को आसानी से और ज़्यादा सटीक बनाएं.
  • इमेज और ब्यौरे देकर, अपने उपयोगकर्ताओं की सीखने-समझने की क्षमता कम करें.
  • एक ही इकाई के डुप्लीकेट नामों से बचें: पफ़ डैडी, पी. डिडी, शॉन कॉम्ब्स सभी /en/sean_combs को रेफ़र करते हैं.

अपनी वेबसाइट में नॉलेज ग्राफ़ खोज विजेट जोड़ना

किसी पेज पर नॉलेज ग्राफ़ सर्च विजेट जोड़ने के लिए, अपनी वेबसाइट के सोर्स में यह कोड शामिल करें. आपको एपीआई पासकोड का इस्तेमाल करना होगा, ताकि विजेट Google नॉलेज ग्राफ़ एपीआई को ऐक्सेस कर सके.

अपनी वेबसाइट में शामिल करने के लिए कोड

अपने एचटीएमएल दस्तावेज़ के <head> में यह जानकारी शामिल करें:

<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"), {});

Search विजेट को कॉन्फ़िगर करना

जैसा कि ऊपर दिखाया गया है, आपका 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. पर सेट किया गया है
सीमा Integer 20 ड्रॉपडाउन मेन्यू में नतीजों की ज़्यादा से ज़्यादा संख्या.
प्रकार श्रेणी(स्ट्रिंग) किसी भी प्रकार की सिर्फ़ वे इकाइयां दिखाएं जो दी गई किसी भी इकाई टाइप से मेल खाती हैं. अगर यह पैरामीटर शामिल नहीं किया जाता है, तो किसी भी तरह की इकाई के नतीजे को मैच करें.
maxDescChars Integer अनलिमिटेड हर इकाई के बारे में पूरी जानकारी में, वर्णों की ज़्यादा से ज़्यादा संख्या. maxDescChars से ज़्यादा लंबे कॉन्टेंट को काट दिया जाएगा.
selectHandler फ़ंक्शन शून्य कोई पंक्ति चुनने पर, कॉल करने के लिए कॉलबैक फ़ंक्शन. कॉलबैक फ़ंक्शन का आर्ग्युमेंट एक इवेंट होता है. इसमें row एट्रिब्यूट शामिल होता है, जिसमें चुनी गई लाइन के बारे में जानकारी होती है. इस कॉलबैक का इस्तेमाल करने के उदाहरण के लिए, इवेंट हैंडलर का इस्तेमाल करना देखें.
highlightHandler फ़ंक्शन शून्य जब उपयोगकर्ता पंक्ति पर कर्सर घुमाता है, तब इसे कॉल किया जाता है. कॉलबैक फ़ंक्शन का आर्ग्युमेंट एक इवेंट होता है. इसमें 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);
  }
});

सहायता और सुझाव

अगर आपके पास नॉलेज ग्राफ़ सर्च एपीआई के बारे में कोई सवाल है, गड़बड़ी की रिपोर्ट है या कोई सुझाव/राय देनी है या शिकायत करनी है, तो सहायता फ़ोरम पर जाएं.