एचटीएमएल मार्कअप का इस्तेमाल करके, अपने वेब पेजों और दूसरे वेब ऐप्लिकेशन में Programmable Search Engine के कॉम्पोनेंट (खोज बॉक्स और खोज के नतीजों वाले पेज) एम्बेड किए जा सकते हैं. Programmable Search Engine के इन एलिमेंट में ऐसे कॉम्पोनेंट होते हैं जो Programmable Search के सर्वर की सेव की गई सेटिंग के आधार पर रेंडर होते हैं. साथ ही, इनमें अपनी पसंद के मुताबिक किए गए बदलाव भी शामिल होते हैं.
सभी JavaScript, एसिंक्रोनस रूप से लोड होती हैं. इससे, ब्राउज़र पर Programmable Search Engine JavaScript को फ़ेच करने के दौरान, आपका वेबपेज लोड होता रहता है.
परिचय
इस दस्तावेज़ में, आपके वेब पेज में Programmable Search Engine एलिमेंट जोड़ने का बेसिक मॉडल दिया गया है. साथ ही, इसमें एलिमेंट के कॉन्फ़िगर किए जा सकने वाले कॉम्पोनेंट और सुविधाजनक JavaScript API के बारे में जानकारी भी दी गई है.
दायरा
इस दस्तावेज़ में, Programmable Search Engine Control API के खास फ़ंक्शन और प्रॉपर्टी को इस्तेमाल करने का तरीका बताया गया है.
ब्राउज़र के साथ काम करना
Programmable Search Engine के साथ काम करने वाले ब्राउज़र की सूची यहां देखें.
दर्शक
यह दस्तावेज़ उन डेवलपर के लिए है जो अपने पेजों में Google Programmable Search की सुविधा जोड़ना चाहते हैं.
Programmable Search के एलिमेंट
अपने पेज पर Programmable Search एलिमेंट जोड़ने के लिए, एचटीएमएल मार्कअप का इस्तेमाल किया जा सकता है. हर एलिमेंट में कम से कम एक कॉम्पोनेंट होता है: एक खोज बॉक्स, खोज के नतीजों का एक ब्लॉक या दोनों. खोज बॉक्स, इनमें से किसी भी तरीके से उपयोगकर्ता का इनपुट स्वीकार करता है:
- टेक्स्ट इनपुट फ़ील्ड में टाइप की गई खोज क्वेरी
- यूआरएल में जोड़ी गई क्वेरी स्ट्रिंग
- प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस
इसके अलावा, खोज नतीजों का ब्लॉक इन तरीकों से इनपुट स्वीकार करता है:
- यूआरएल में जोड़ी गई क्वेरी स्ट्रिंग
- प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस
Programmable Search के एलिमेंट इस तरह के उपलब्ध होते हैं:
| तत्व प्रकार | घटक | ब्यौरा |
|---|---|---|
| स्टैंडर्ड | <div class="gcse-search"> |
एक खोज बॉक्स और खोज के नतीजे,
एक ही <div> में दिखाए जाते हैं. |
| दो कॉलम | <div class="gcse-searchbox"> और <div class="gcse-searchresults"> |
दो कॉलम वाला लेआउट, जिसमें एक तरफ़ खोज के नतीजे दिख रहे हैं. दूसरी तरफ़ खोज बॉक्स
दिख रहा है. अगर आपको अपने वेबपेज में, दो कॉलम में एक से ज़्यादा एलिमेंट डालने हैं, तो gname एट्रिब्यूट का इस्तेमाल करके, खोज बॉक्स को खोज के नतीजों के साथ जोड़ा जा सकता है. |
| सिर्फ़ खोज बॉक्स | <div class="gcse-searchbox-only"> |
स्टैंडअलोन खोज बॉक्स. |
| केवल-खोज परिणाम | <div class="gcse-searchresults-only"> |
खोज नतीजों का एक अलग ब्लॉक. |
अपने वेबपेज पर कितने भी मान्य खोज एलिमेंट जोड़े जा सकते हैं. दो-कॉलम वाले मोड के लिए, सभी ज़रूरी कॉम्पोनेंट मौजूद होने चाहिए. जैसे, खोज बॉक्स और खोज नतीजों वाला ब्लॉक.
यहां एक सामान्य खोज एलिमेंट का उदाहरण दिया गया है:
<!-- Put the following javascript before the closing </head> tag and replace 123456 with your own Programmable Search Engine ID. --> <script async src="https://cse.google.com/cse.js?cx=123456"></script> <!-- Place this tag where you want both of the search box and the search results to render --> <div class="gcse-search"></div>
Programmable Search के एलिमेंट का इस्तेमाल करके, अलग-अलग लेआउट के विकल्प बनाना
Programmable Search Engine के कंट्रोल पैनल के 'लुक और स्टाइल' पेज पर, ये लेआउट विकल्प उपलब्ध हैं. Programmable Search के एलिमेंट का इस्तेमाल करके, लेआउट विकल्प लिखने के बारे में कुछ सामान्य दिशा-निर्देश यहां दिए गए हैं. इनमें से किसी भी विकल्प का डेमो देखने के लिए, लिंक पर क्लिक करें.
| विकल्प | घटक |
|---|---|
| पूरी चौड़ाई | <div class="gcse-search"> |
| छोटा | <div class="gcse-search"> |
| दो कॉलम | <div class="gcse-searchbox">, <div class="gcse-searchresults"> |
| दो पेज | पहले पेज पर <div class="gcse-searchbox-only">, दूसरे पेज पर <div class="gcse-searchresults-only"> (या दूसरे कॉम्पोनेंट). |
| सिर्फ़ नतीजे | <div class="gcse-searchresults-only"> |
| Google की मदद से होस्ट किए गए | <div class="gcse-searchbox-only"> |
लेआउट के विकल्पों के बारे में ज़्यादा जानकारी.
Programmable Search के एलिमेंट को पसंद के मुताबिक बनाना
रंग, फ़ॉन्ट या लिंक स्टाइल को पसंद के मुताबिक बनाने के लिए, प्रोग्राम किए जा सकने वाले सर्च इंजन के 'लुक और स्टाइल' पेज पर जाएं.
Programmable Search Engine के कंट्रोल पैनल में बनाए गए कॉन्फ़िगरेशन को ओवरराइट करने के लिए, वैकल्पिक एट्रिब्यूट का इस्तेमाल किया जा सकता है. इससे आपको पेज के हिसाब से खोज करने का अनुभव मिलता है.
उदाहरण के लिए, यह कोड एक खोज बॉक्स बनाता है, जिससे नतीजे वाला पेज (http://www.example.com?search=lady+gaga) नई विंडो में खुलता है. नतीजों का यूआरएल बनाने के लिए, queryParameterName एट्रिब्यूट की वैल्यू और उपयोगकर्ता की क्वेरी स्ट्रिंग का इस्तेमाल किया जाता है.
ध्यान दें कि queryParameterName एट्रिब्यूट की शुरुआत data- से होती है.
यह प्रीफ़िक्स सभी एट्रिब्यूट के लिए ज़रूरी है.
<div class="gcse-searchbox-only" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search">
अगर आपने ऑटोकंप्लीट या रिफ़ाइन जैसी सुविधाओं को चालू करने के लिए, Programmable Search Engine के कंट्रोल पैनल का इस्तेमाल किया है, तो उन सुविधाओं को पसंद के मुताबिक बनाने के लिए, एट्रिब्यूट का इस्तेमाल किया जा सकता है. इन विशेषताओं का इस्तेमाल करके, पसंद के मुताबिक बनाने की सुविधा कंट्रोल पैनल में की गई सेटिंग को बदल देगी. इस उदाहरण में, दो कॉलम वाला Search एलिमेंट बनाया गया है, जिसमें ये सुविधाएं हैं:
- इतिहास को मैनेज करने की सुविधा चालू है
- अपने-आप पूरा होने की ज़्यादा से ज़्यादा संख्या 5 पर सेट है
- रिफ़ाइन करने की सुविधा, लिंक के तौर पर दिखती है.
<div class="gcse-searchbox" data-enableHistory="true" data-autoCompleteMaxCompletions="5"> <div class="gcse-searchresults" data-refinementStyle="link">
इस्तेमाल किए जा सकने वाले एट्रिब्यूट
| एट्रिब्यूट | टाइप | ब्यौरा | कॉम्पोनेंट |
|---|---|---|---|
| सामान्य | |||
gname |
स्ट्रिंग | (ज़रूरी नहीं) Search Element के ऑब्जेक्ट के लिए एक नाम. नाम का इस्तेमाल, जुड़े हुए
कॉम्पोनेंट को नाम के आधार पर पाने या searchbox
कॉम्पोनेंट को searchresults कॉम्पोनेंट के साथ जोड़ने के लिए किया जाता है. अगर इसकी वैल्यू नहीं दी जाती है,
तो Programmable Search Engine, वेबपेज पर मौजूद कॉम्पोनेंट के क्रम के हिसाब से,
अपने-आप gname जनरेट करेगा. उदाहरण के लिए, बिना नाम वाले पहले searchbox-only में, gname "searchbox-only0" है और दूसरे में gname "seachbox-only1" है. यह इसी तरह बाकी है.
ध्यान दें कि दो कॉलम वाले लेआउट में किसी कॉम्पोनेंट के लिए, अपने-आप जनरेट होने वाला gname two-column होगा. इस उदाहरण में,
searchbox कॉम्पोनेंट को searchresults कॉम्पोनेंट के साथ लिंक करने के लिए,
storesearch नाम का इस्तेमाल किया गया है:
<div class="gcse-searchbox" data-gname="storesearch"></div> <div class="gcse-searchresults" data-gname="storesearch"></div> किसी ऑब्जेक्ट को वापस पाने के लिए, अगर एक से ज़्यादा कॉम्पोनेंट में एक ही
|
कोई भी |
autoSearchOnLoad |
बूलियन | इस नीति से तय होता है कि लोड हो रहे पेज के यूआरएल में एम्बेड की गई क्वेरी की मदद से खोज करनी है या नहीं. ध्यान दें कि अपने-आप खोजने की सुविधा के लिए, यूआरएल में क्वेरी स्ट्रिंग का मौजूद होना ज़रूरी है. डिफ़ॉल्ट: true. |
कोई भी |
enableHistory |
बूलियन | true पर क्लिक करने पर, ब्राउज़र के 'वापस जाएं' और 'आगे बढ़ें' बटन के लिए, इतिहास को मैनेज करने की सुविधा चालू हो जाती है. डेमो देखें. |
searchbox सिर्फ़ खोज बॉक्स |
queryParameterName |
स्ट्रिंग | क्वेरी पैरामीटर का नाम—उदाहरण के लिए, q (डिफ़ॉल्ट)
या query. यह यूआरएल में एम्बेड हो जाएगा (उदाहरण के लिए,
http://www.example.com?q=lady+gaga). ध्यान दें कि सिर्फ़ क्वेरी पैरामीटर का नाम बताने से, लोड होने पर ऑटो-सर्च ट्रिगर नहीं होता. अपने-आप खोजने की सुविधा के लिए, यूआरएल में क्वेरी स्ट्रिंग का मौजूद होना ज़रूरी है. |
कोई भी |
resultsUrl |
यूआरएल | नतीजों वाले पेज का यूआरएल. (डिफ़ॉल्ट रूप से यह Google का होस्ट किया गया पेज होता है.) | सिर्फ़ खोज बॉक्स |
newWindow |
बूलियन | इससे पता चलता है कि नतीजों वाला पेज नई विंडो में खुलता है या नहीं.
डिफ़ॉल्ट: false. |
सिर्फ़ खोज बॉक्स |
ivt |
बूलियन |
इस पैरामीटर की मदद से, एक बूलियन भेजा जा सकता है, जिससे Google को पता चलता है कि आप ऐसे विज्ञापनों को अनुमति देना चाहते हैं जो सहमति वाले और बिना सहमति वाले ट्रैफ़िक, दोनों के लिए अमान्य ट्रैफ़िक कुकी और लोकल स्टोरेज का इस्तेमाल करते हैं.
डिफ़ॉल्ट: इस्तेमाल का उदाहरण: |
खोज के नतीजे केवल-खोज परिणाम |
mobileLayout |
स्ट्रिंग |
इस नीति से तय होता है कि मोबाइल डिवाइसों के लिए मोबाइल लेआउट स्टाइल का इस्तेमाल किया जाए या नहीं.
डिफ़ॉल्ट: इस्तेमाल का उदाहरण: |
कोई भी |
| ऑटोकंप्लीट | |||
enableAutoComplete |
बूलियन | यह सुविधा सिर्फ़ तब उपलब्ध होती है, जब Programmable Search Engine के कंट्रोल पैनल में ऑटोकंप्लीट की सुविधा को चालू किया गया हो.
true, ऑटोकंप्लीट की सुविधा को चालू करता है. |
कोई भी |
autoCompleteMaxCompletions |
पूर्णांक | अपने-आप पूरा होने की ज़्यादा से ज़्यादा संख्या, दिखाई जा सकती है. | searchbox सिर्फ़ खोज बॉक्स |
autoCompleteMaxPromotions |
पूर्णांक | अपने-आप पूरा होने की सुविधा में दिखाए जाने वाले प्रमोशन की ज़्यादा से ज़्यादा संख्या. | searchbox सिर्फ़ खोज बॉक्स |
autoCompleteValidLanguages |
स्ट्रिंग | भाषाओं की कॉमा-सेपरेटेड लिस्ट, जिनके लिए ऑटोकंप्लीट की सुविधा चालू होनी चाहिए. यह सुविधा इन भाषाओं में काम करती है. | searchbox सिर्फ़ खोज बॉक्स |
| रिफ़ाइन करने की सुविधा | |||
defaultToRefinement |
स्ट्रिंग | यह तब ही उपलब्ध होता है, जब Programmable Search Engine के कंट्रोल पैनल में, रिफ़ाइनमेंट लागू किए गए हों. यह दिखाने के लिए, डिफ़ॉल्ट तौर पर रिफ़ाइन करने का लेबल दिखाता है.ध्यान दें: यह एट्रिब्यूट, Google के होस्ट किए गए लेआउट के साथ काम नहीं करता. | कोई भी |
refinementStyle |
स्ट्रिंग | स्वीकार की जाने वाली वैल्यू tab (डिफ़ॉल्ट) और link हैं.
link का इस्तेमाल सिर्फ़ तब किया जा सकता है, जब इमेज खोजने की सुविधा बंद हो या इमेज खोजने की सुविधा चालू हो. हालांकि, वेब खोज बंद होने पर भी ऐसा हो सकता है. |
खोज के नतीजे केवल-खोज परिणाम |
| इमेज सर्च | |||
enableImageSearch |
बूलियन | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
अगर |
खोज के नतीजे केवल-खोज परिणाम |
defaultToImageSearch |
बूलियन | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
|
कोई भी |
imageSearchLayout |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
इमेज के खोज नतीजों के पेज का लेआउट तय करता है. स्वीकार की जाने वाली वैल्यू
|
खोज के नतीजे केवल-खोज परिणाम |
imageSearchResultSetSize |
पूर्णांक, स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
इमेज खोज के लिए खोज नतीजों के सेट का ज़्यादा से ज़्यादा साइज़ बताता है.
उदाहरण के लिए, |
कोई भी |
image_as_filetype |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
चुने गए एक्सटेंशन की फ़ाइलों को नतीजों में दिखाता है.
| कोई भी |
image_as_oq |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
लॉजिकल ओआर का इस्तेमाल करके खोज के नतीजे फ़िल्टर करें. अगर आपको ऐसे खोज नतीजे चाहिए जिनमें "term1" या "term2" शामिल हो, तो इस्तेमाल का उदाहरण: | कोई भी |
image_as_rights |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
लाइसेंस देने के हिसाब से फ़िल्टर.
सामान्य कॉम्बिनेशन देखें. | कोई भी |
image_as_sitesearch |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
किसी खास साइट के पेजों को ही नतीजों में दिखाएं. इस्तेमाल का उदाहरण: | कोई भी |
image_colortype |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
खोज को ब्लैक एंड व्हाइट (मोनो), ग्रेस्केल या रंगीन इमेज तक सीमित करता है. | कोई भी |
image_cr |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
खोज के नतीजों को किसी खास देश में लिखे गए दस्तावेज़ों तक सीमित करता है. | कोई भी |
image_dominantcolor |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
खोज को किसी खास मुख्य रंग की इमेज तक सीमित करता है.
| कोई भी |
image_filter |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
खोज के नतीजों को अपने-आप फ़िल्टर करना. इस्तेमाल की जा सकने वाली वैल्यू: 0/1 इस्तेमाल का उदाहरण: | कोई भी |
image_gl |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में इमेज सर्च की सुविधा चालू हो. उन खोज नतीजों को बूस्ट करें जिनके मूल देश, पैरामीटर की वैल्यू से मेल खाते हों. | कोई भी |
image_size |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
किसी खास साइज़ की इमेज दिखाता है, जहां साइज़ इनमें से कोई एक हो सकता है: | कोई भी |
image_sort_by |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
तारीख या किसी दूसरे स्ट्रक्चर्ड कॉन्टेंट का इस्तेमाल करके, नतीजों को क्रम से लगाएं. ज़रूरत के हिसाब से क्रम में लगाने के लिए, खाली स्ट्रिंग (image_sort_by="") का इस्तेमाल करें. इस्तेमाल का उदाहरण: | कोई भी |
image_type |
स्ट्रिंग | यह तब ही उपलब्ध होगा, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो.
खोज को किसी खास तरह की इमेज तक सीमित करता है.
| कोई भी |
| वेब खोज | |||
disableWebSearch |
बूलियन | अगर true हो, तो वेब खोज बंद हो जाती है. आम तौर पर, इसे सिर्फ़ तब इस्तेमाल किया जाता है, जब Programmable Search Engine के कंट्रोल पैनल में
इमेज सर्च की सुविधा चालू हो. |
खोज के नतीजे केवल-खोज परिणाम |
webSearchQueryAddition |
स्ट्रिंग | लॉजिकल OR का इस्तेमाल करके खोज क्वेरी में अतिरिक्त शब्द जोड़े गए हैं.
इस्तेमाल का उदाहरण: |
कोई भी |
webSearchResultSetSize |
पूर्णांक, स्ट्रिंग | सेट किए गए नतीजों का ज़्यादा से ज़्यादा साइज़. इमेज खोज और वेब खोज,
दोनों पर लागू होती है. डिफ़ॉल्ट सेटिंग, लेआउट के हिसाब से तय होती है. साथ ही, यह इस बात पर निर्भर करता है कि Programmable Search Engine को पूरे वेब पर खोजने के लिए कॉन्फ़िगर किया गया है या सिर्फ़ बताई गई साइटों पर. ये वैल्यू स्वीकार की जाती हैं:
|
कोई भी |
webSearchSafesearch |
स्ट्रिंग |
इससे पता चलता है कि
SafeSearch की सुविधा, वेबखोज के नतीजों के लिए चालू है या नहीं. off और active वैल्यू का इस्तेमाल किया जा सकता है.
|
कोई भी |
as_filetype |
स्ट्रिंग | चुने गए एक्सटेंशन की फ़ाइलों को नतीजों में दिखाता है. Google जिन फ़ाइल टाइप को इंडेक्स कर सकता है उनकी सूची Search Console के सहायता केंद्र पर देखी जा सकती है. | कोई भी |
as_oq |
स्ट्रिंग | लॉजिकल ओआर का इस्तेमाल करके खोज के नतीजे फ़िल्टर करें.
अगर आपको ऐसे खोज नतीजे चाहिए जिनमें "term1" या "term2" शामिल हो, तो इस्तेमाल का उदाहरण: |
कोई भी |
as_rights |
स्ट्रिंग | लाइसेंस देने के हिसाब से फ़िल्टर.
सामान्य कॉम्बिनेशन के लिए, https://wiki.creativecommons.org/wiki/CC_Search_integration देखें. | कोई भी |
as_sitesearch |
स्ट्रिंग | किसी खास साइट के पेजों को ही नतीजों में दिखाएं.
इस्तेमाल का उदाहरण: |
कोई भी |
cr |
स्ट्रिंग | खोज के नतीजों को किसी खास देश में लिखे गए दस्तावेज़ों तक सीमित करता है.
इस्तेमाल की जा सकने वाली वैल्यू इस्तेमाल का उदाहरण: |
कोई भी |
filter |
स्ट्रिंग | खोज के नतीजों को अपने-आप फ़िल्टर करना.
इस्तेमाल की जा सकने वाली वैल्यू: 0/1 इस्तेमाल का उदाहरण: |
कोई भी |
gl |
स्ट्रिंग | उन खोज नतीजों को बूस्ट करें जिनके मूल देश, पैरामीटर की वैल्यू से मेल खाते हों.
यह सिर्फ़ भाषा की वैल्यू सेटिंग के साथ काम करेगा. इस्तेमाल की जा सकने वाली वैल्यू इस्तेमाल का उदाहरण: |
कोई भी |
lr |
स्ट्रिंग | खोज के नतीजों में, किसी खास भाषा में लिखे दस्तावेज़ों को ही दिखाता है.
इस्तेमाल की जा सकने वाली वैल्यू इस्तेमाल का उदाहरण: |
कोई भी |
sort_by |
स्ट्रिंग | तारीख या किसी दूसरे स्ट्रक्चर्ड कॉन्टेंट का इस्तेमाल करके, नतीजों को क्रम से लगाएं. एट्रिब्यूट की वैल्यू, प्रोग्राम किए जा सकने वाले सर्च इंजन की नतीजों को क्रम में लगाने की सेटिंग में दिए गए विकल्पों में से एक होनी चाहिए.
ज़रूरत के मुताबिक क्रम से लगाने के लिए, खाली स्ट्रिंग (sort_by="") का इस्तेमाल करें. इस्तेमाल का उदाहरण: |
कोई भी |
| खोज के नतीजे | |||
enableOrderBy |
बूलियन | प्रासंगिकता, तारीख या लेबल के मुताबिक नतीजों को क्रम से लगाने की सुविधा चालू करता है. | कोई भी |
linkTarget |
स्ट्रिंग | लिंक टारगेट सेट करता है. डिफ़ॉल्ट: _blank. |
खोज के नतीजे केवल-खोज परिणाम |
noResultsString |
स्ट्रिंग | क्वेरी से मिलता-जुलता कोई नतीजा नहीं मिलने पर, डिफ़ॉल्ट टेक्स्ट दिखाता है. डिफ़ॉल्ट नतीजे वाली स्ट्रिंग का इस्तेमाल, स्थानीय भाषा में उपलब्ध स्ट्रिंग को सभी भाषाओं में दिखाने के लिए किया जा सकता है. हालांकि, पसंद के मुताबिक बनाई गई स्ट्रिंग का इस्तेमाल नहीं किया जा सकता. | खोज के नतीजे केवल-खोज परिणाम |
resultSetSize |
पूर्णांक, स्ट्रिंग | सेट किए गए नतीजों का ज़्यादा से ज़्यादा साइज़. उदाहरण के लिए, large, small, filtered_cse, 10. डिफ़ॉल्ट
विकल्प, लेआउट के साथ-साथ, इस बात पर निर्भर करता है कि इंजन को पूरे वेब पर खोजने के लिए कॉन्फ़िगर किया गया है या सिर्फ़ खास साइटों पर खोजने के लिए. |
कोई भी |
safeSearch |
स्ट्रिंग | इससे पता चलता है कि
सेफ़ सर्च की सुविधा वेब और इमेज खोज, दोनों के लिए चालू है या नहीं. off
और active वैल्यू इस्तेमाल की जा सकती हैं. |
कोई भी |
कॉलबैक
कॉलबैक की मदद से, खोज एलिमेंट को शुरू करने और खोजने की प्रोसेस को बेहतर तरीके से कंट्रोल किया जा सकता है.
इन्हें ग्लोबल __gcse ऑब्जेक्ट की मदद से, Search Element के JavaScript के साथ रजिस्टर किया जाता है. रजिस्टर करने वाले कॉलबैक में, इस्तेमाल किए जा सकने वाले सभी कॉलबैक के रजिस्ट्रेशन की जानकारी दी गई हो.
window.__gcse = {
parsetags: 'explicit', // Defaults to 'onload'
initializationCallback: myInitializationCallback,
searchCallbacks: {
image: {
starting: myImageSearchStartingCallback,
ready: myImageResultsReadyCallback,
rendered: myImageResultsRenderedCallback,
},
web: {
starting: myWebSearchStartingCallback,
ready: myWebResultsReadyCallback,
rendered: myWebResultsRenderedCallback,
},
},
};
शुरू करने का कॉलबैक
सर्च एलिमेंट JavaScript से डीओएम में सर्च एलिमेंट रेंडर करने से पहले, इनिशलाइज़ेशन कॉलबैक को शुरू किया जाता है. अगर __gcse में parsetags को explicit पर सेट किया गया है, तो सर्च एलिमेंट JavaScript, खोज एलिमेंट को
इनिशलाइज़ेशन कॉलबैक (जैसे कि कॉलबैक रजिस्टर करें में दिखाया गया है) में रेंडर करना छोड़ देता है.
इसका इस्तेमाल, रेंडर करने के लिए एलिमेंट चुनने या रेंडर करने वाले एलिमेंट को तब तक रोकने के लिए किया जा सकता है,
जब तक उनकी ज़रूरत न हो. यह एलिमेंट के एट्रिब्यूट भी बदल सकता है; उदाहरण के लिए, कंट्रोल पैनल या एचटीएमएल एट्रिब्यूट से कॉन्फ़िगर किए गए खोज बॉक्स को, डिफ़ॉल्ट रूप से इमेज के खोज बॉक्स में बदला जा सकता है. इसके अलावा, Programmable Search Engine के फ़ॉर्म से सबमिट की गई क्वेरी को, सिर्फ़ खोज के नतीजों वाले एलिमेंट में लागू किया जा सकता है.
डेमो देखें.
इनिशलाइज़ेशन कॉलबैक की भूमिका, __gcse की parsetags
प्रॉपर्टी की वैल्यू से कंट्रोल होती है.
- अगर इसकी वैल्यू
onloadहै, तो Search Element JavaScript, पेज पर मौजूद सभी खोज एलिमेंट को अपने-आप रेंडर करता है. इनिशलाइज़ेशन कॉलबैक अब भी शुरू किया जाता है, लेकिन यह सर्च एलिमेंट को रेंडर करने के लिए ज़िम्मेदार नहीं है. - अगर इसकी वैल्यू
explicitहै, तो Search एलिमेंट JavaScript, Search एलिमेंट को रेंडर नहीं करता. कॉलबैक उन्हेंrender()फ़ंक्शन का इस्तेमाल करके, चुनिंदा तरीके से रेंडर कर सकता है याgo()फ़ंक्शन की मदद से, खोज के सभी एलिमेंट को रेंडर कर सकता है
इस कोड से पता चलता है कि explicit पार्सटैग और इनिशलाइज़ेशन कॉलबैक का इस्तेमाल करके,
div में खोज के नतीजों के साथ खोज बॉक्स को कैसे रेंडर किया जाता है:
हमें आईडी वैल्यू के साथ एक <div> शामिल करना होगा, जहां
हमें सर्च एलिमेंट कोड की ज़रूरत होगी:
<div id="test"></div>
इस JavaScript को <div> के बाद जोड़ें. ध्यान दें कि यह test के बारे में बताता है. id का इस्तेमाल, <div>const myInitCallback = function() {
if (document.readyState == 'complete') {
// Document is ready when Search Element is initialized.
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
} else {
// Document is not ready yet, when Search Element is initialized.
google.setOnLoadCallback(function() {
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
}, true);
}
};
// Insert it before the Search Element code snippet so the global properties like parsetags and callback
// are available when cse.js runs.
window.__gcse = {
parsetags: 'explicit',
initializationCallback: myInitCallback
};
खोज एलिमेंट लोड करना शुरू करने के लिए, यह एचटीएमएल शामिल करें. src क्लॉज़ में cx वैल्यू को अपने cx से बदलें.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
कॉलबैक खोजें
Search Element JavaScript ऐसे छह कॉलबैक के साथ काम करता है जो सर्च कंट्रोल फ़्लो में काम करते हैं. खोज कॉलबैक, पेयर, वेब खोज कॉलबैक, और इमेज सर्च कॉलबैक से मेल खाते हैं:
- खोज शुरू हो रही है
- इमेज सर्च के लिए
- वेब खोज के लिए
- जांच पूरी हो गई
- इमेज सर्च के लिए
- वेब खोज के लिए
- रेंडर किए गए नतीजे
- इमेज सर्च के लिए
- वेब खोज के लिए
इनीशियलाइज़ेशन कॉलबैक की तरह,खोज कॉलबैक को भी
__gcse ऑब्जेक्ट में एंट्री का इस्तेमाल करके कॉन्फ़िगर किया जाता है. ऐसा, Search एलिमेंट JavaScript के शुरू होते ही होता है. स्टार्टअप के बाद __gcse में किए गए बदलावों को अनदेखा किया जाता है.
इनमें से हर कॉलबैक को, Search एलिमेंट के लिए gName को आर्ग्युमेंट के तौर पर पास किया जाता है.
gname तब काम आता है, जब किसी पेज में एक से ज़्यादा खोजें होती हैं. data-gname एट्रिब्यूट का इस्तेमाल करके, खोज
एलिमेंट को gname वैल्यू दें:
<div class="gcse-searchbox" data-gname="storesearch"></div>
अगर एचटीएमएल, gname की पहचान नहीं कर पाता है, तो Search Element JavaScript एक वैल्यू जनरेट करता है. यह वैल्यू तब तक एक जैसी रहेगी, जब तक एचटीएमएल में बदलाव नहीं किया जाता.
इमेज/वेब सर्च-स्टार्टिंग कॉलबैक
खोज शुरू करने वाले कॉलबैक, अपने सर्वर से खोज के नतीजों के लिए खोज के नतीजे का अनुरोध करने से ठीक पहले, सर्च एलिमेंट JavaScript शुरू कर देते हैं. इसका एक उदाहरण है, क्वेरी में बदलावों को कंट्रोल करने के लिए, दिन के स्थानीय समय का इस्तेमाल करना.
searchStartingCallback(gname, query)
gname- Search Element की पहचान करने वाली स्ट्रिंग
query- उपयोगकर्ता का डाला गया मान (शायद खोज एलिमेंट JavaScript से बदला गया है.)
कॉलबैक वह वैल्यू दिखाता है जिसे इस खोज के लिए क्वेरी के तौर पर इस्तेमाल किया जाना चाहिए. अगर यह कोई खाली स्ट्रिंग दिखाता है, तो रिटर्न वैल्यू को अनदेखा कर दिया जाता है. साथ ही, कॉल करने वाला बिना बदलाव की गई क्वेरी का इस्तेमाल करता है.
इसके अलावा, आपके पास कॉलबैक फ़ंक्शन को __gcse ऑब्जेक्ट में रखने या
JavaScript का इस्तेमाल करके, ऑब्जेक्ट में डाइनैमिक तौर पर कॉलबैक जोड़ने का विकल्प है:
window.__gcse['searchCallbacks']['web']['starting'] = function(gname, query) {...};
उदाहरण खोज शुरू होने वाली कॉलबैक
उदाहरण के लिए, Search पर कॉलबैक शुरू करने की सुविधा में, खोज शुरू करने के उदाहरण में, दिन के अलग-अलग समय के हिसाब से क्वेरी में morning या afternoon जोड़ा जाता है.
const myWebSearchStartingCallback = (gname, query) => {
const hour = new Date().getHours();
return query + (hour < 12 ? ' morning' : ' afternoon');
};
window.myImageSearchStartingCallbackName = myWebSearchStartingCallback;
window.__gcse: में इस कॉलबैक को इंस्टॉल करें
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
image: {
starting: 'myImageSearchStartingCallbackName',
},
web: {
starting: myWebSearchStartingCallback,
},
};
<script
async src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
इमेज/वेब खोज के नतीजों के लिए तैयार कॉलबैक
इन कॉलबैक को, Search एलिमेंट JavaScript के प्रमोशन और नतीजों को रेंडर करने से ठीक पहले शुरू किया जाता है. इस्तेमाल के उदाहरण में, ऐसा कॉलबैक होना चाहिए जो प्रमोशन को रेंडर करता है और नतीजों को ऐसी स्टाइल में रेंडर करता है जिसे सामान्य तौर पर पसंद के मुताबिक बनाने की सुविधा के साथ तय नहीं किया जा सकता.
resultsReadyCallback(gname, query, promos, results, div)
gname- Search Element की पहचान करने वाली स्ट्रिंग
query- क्वेरी, जिसकी वजह से ये नतीजे मिले
promos- प्रमोशन से जुड़े ऑब्जेक्ट का कलेक्शन, जो उपयोगकर्ता की क्वेरी से मेल खाने वाले प्रमोशन से मेल खाता है. प्रमोशन ऑब्जेक्ट की परिभाषा देखें.
results- नतीजे वाले ऑब्जेक्ट की कलेक्शन. रिज़ल्ट ऑब्जेक्ट की परिभाषा देखें.
div- डीओएम में मौजूद एक एचटीएमएल डीव, जहां सर्च एलिमेंट आम तौर पर
प्रमोशन और खोज के नतीजे शामिल करता है. आम तौर पर, सर्च एलिमेंट JavaScript इस डीव को पॉप्युलेट कर सकता है, लेकिन यह कॉलबैक, नतीजों की अपने-आप रेंडरिंग को बंद कर सकता है. साथ ही, नतीजों को रेंडर करने के लिए, इस
divका इस्तेमाल कर सकता है.
अगर यह कॉलबैक true वैल्यू दिखाता है, तो Search एलिमेंट JavaScript अपने पेज-फ़ुटर के काम पर ले जाता है.
नतीजों के लिए तैयार कॉलबैक के उदाहरण
नतीजों के लिए तैयार कॉलबैक में मौजूद resultsReady कॉलबैक, प्रमोशन और नतीजों के डिफ़ॉल्ट प्रज़ेंटेशन को बदल देता है. इसके लिए, बहुत आसानी से बदलाव किया जा सकता है.
const myResultsReadyCallback = function(name, q, promos, results, resultsDiv) {
const makePromoElt = (promo) => {
const anchor = document.createElement('a');
anchor.href = promo['url'];
anchor.target = '_blank';
anchor.classList.add('gs-title');
const span = document.createElement('span');
span.innerHTML = 'Promo: ' + promo['title'];
anchor.appendChild(span);
return anchor;
};
const makeResultParts = (result) => {
const anchor = document.createElement('a');
anchor.href = result['url'];
anchor.target = '_blank';
anchor.classList.add('gs_title');
anchor.appendChild(document.createTextNode(result['visibleUrl']));
const span = document.createElement('span');
span.innerHTML = ' ' + result['title'];
return [anchor, span];
};
const table = document.createElement('table');
if (promos) {
for (const promo of promos) {
const row = table.insertRow(-1);
const cell = row.insertCell(-1);
cell.appendChild(makePromoElt(promo));
}
resultsDiv.appendChild(table);
resultsDiv.appendChild(document.createElement('br'));
}
if (results) {
const table = document.createElement('table');
for (const result of results) {
const row = table.insertRow(-1);
const cell = row.insertCell(-1);
const [anchor, span] = makeResultParts(result);
cell.appendChild(anchor);
const cell2 = row.insertCell(-1);
cell2.appendChild(span);
}
resultsDiv.appendChild(table);
}
return true;
};
window.__gcse: में इस कॉलबैक को इंस्टॉल करें
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
ready: myResultsReadyCallback,
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
खोज शुरू करने वाले कॉलबैक की तरह ही, कॉलबैक को
__gcse ऑब्जेक्ट में रखने के कई तरीके ऊपर दिए गए हैं.
इमेज/वेब खोज नतीजे-रेंडर किए गए कॉलबैक
खोज एलिमेंट JavaScript से पेज फ़ुटर को रेंडर करने से ठीक पहले, इन कॉलबैक को शुरू किया जाता है. इस्तेमाल के उदाहरणों में एक कॉलबैक शामिल होगा, जो नतीजे में ऐसा कॉन्टेंट जोड़ता है जो Search एलिमेंट में नहीं दिखता. उदाहरण के लिए, इसे सेव करें चेकबॉक्स या अपने-आप रेंडर न होने वाली जानकारी या ज़्यादा जानकारी के लिए बटन जोड़ने वाला कॉलबैक.
अगर रेंडर किए गए नतीजे के कॉलबैक में, ऐसी जानकारी की ज़रूरत होती है जो नतीजों के लिए तैयार कॉलबैक के promos और results पैरामीटर में थी, तो यह इन दोनों के बीच पास कर सकता है, जैसे कि:
callback(gname, query, promoElts, resultElts);
gname- Search Element की पहचान करने वाली स्ट्रिंग
query- खोज स्ट्रिंग.
promoElts- प्रमोशन वाले DOM एलिमेंट की कलेक्शन.
resultElts- DOM एलिमेंट की एक कलेक्शन, जिसमें नतीजे शामिल हैं.
कोई रिटर्न वैल्यू नहीं है.
में पास किए जाते हैं.उदाहरण के तौर पर, रेंडर किए गए कॉलबैक
नतीजे रेंडर किए गए कॉलबैक के उदाहरण में दिए गए resultsRendered कॉलबैक में, हर प्रमोशन और नतीजे के लिए एक डमी रखें चेकबॉक्स जोड़ा जाता है.
myWebResultsRenderedCallback = function(name, q, promos, results) {
for (const div of promos.concat(results)) {
const innerDiv = document.createElement('div');
innerDiv.appendChild(document.createTextNode('Keep: '));
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.name = 'save';
innerDiv.appendChild(checkBox);
div.insertAdjacentElement('afterbegin', innerDiv);
}
};
window.__gcse: में इस कॉलबैक को इंस्टॉल करें
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
rendered: 'myWebResultsRenderedCallback',
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
अगर नतीजे के तौर पर रेंडर किए गए कॉलबैक को नतीजे के लिए तैयार कॉलबैक को भेजी गई जानकारी की ज़रूरत होती है, तो उस डेटा को कॉलबैक के बीच पास किया जा सकता है. इस उदाहरण में, richSnippet से मिली रेटिंग की वैल्यू को नतीजों के लिए तैयार कॉलबैक से, नतीजे के तौर पर रेंडर किए गए कॉलबैक पर पास करने के कई तरीकों में से एक दिखाया गया है.
const makeTwoPartCallback = () => {
let saveForRenderCallback;
const readyCallback = (name, q, promos, results, resultsDiv) =>
{
saveForRenderCallback = [];
for (const result of results) {
const {
richSnippet: {
answer = []
} = {},
} = result;
const firstAnswer = answer[0];
if (firstAnswer) {
const upVotes = firstAnswer['upvotecount'];
if (upVotes) {
saveForRenderCallback.push(
{upvotes: parseInt(upVotes, 10)}
);
continue;
}
}
saveForRenderCallback.push({});
}
};
const renderedCallback = (name, q, promos, results) => {
for (let i = 0; i < results.length; ++i) {
const div = results[i];
const votes = saveForRenderCallback[i]['upvotes'];
if (votes) {
const innerDiv = document.createElement('div');
innerDiv.innerHTML = '<b>Upvotes: ' + votes + '</b>';
div.insertAdjacentElement('afterbegin', innerDiv);
}
}
};
return {readyCallback, renderedCallback};
};__gcse सेट अप करते समय, इस तरह के कोड का इस्तेमाल करके इस कॉलबैक को इंस्टॉल करें __gcse:
const {
readyCallback: webResultsReadyCallback,
renderedCallback: webResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
ready: webResultsReadyCallback,
rendered: webResultsRenderedCallback,
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:kdroeu4mwju"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
कॉलबैक के ज़्यादा उदाहरण
कॉलबैक के अन्य उदाहरण, कॉलबैक के अन्य उदाहरण दस्तावेज़ में देखे जा सकते हैं.
प्रमोशन और नतीजे की प्रॉपर्टी
JSDoc नोटेशन का इस्तेमाल करने पर, ये प्रमोशन और नतीजे ऑब्जेक्ट की प्रॉपर्टी होती हैं. यहां हमने उन सभी प्रॉपर्टी की सूची बनाई है जो शायद मौजूद हों. कई प्रॉपर्टी की मौजूदगी, प्रमोशन या खोज के नतीजों की जानकारी पर निर्भर करती है.
{
content: string,
image: {
height: number,
url: string,
width: number,
},
title: string,
url: string,
visibleUrl: string,
}
{
content: string,
contentNoFormatting: string,
contextUrl: string, // For image search results only
fileFormat: string,
image: { // For image search reseults only
height: number,
url: string,
width: number,
},
perResultLabels: !Array<{
anchor: string,
label: string,
labelWithOp: string,
}>,
richSnippet: !Array<!Object>, // For web search results only
thumbnailImage: {
height: number,
url: string,
width: number,
},
title: string,
titleNoFormatting: string,
url: string,
visibleUrl: string,
}
नतीजों में richSnippet के ऑब्जेक्ट की कैटगरी ढीली है. इस कलेक्शन में मौजूद एंट्री की वैल्यू को खोज के हर नतीजे के लिए, वेब पेज पर मिलने वाले स्ट्रक्चर्ड डेटा से कंट्रोल किया जाता है. उदाहरण के लिए, समीक्षा करने वाली वेबसाइट पर
ऐसा स्ट्रक्चर्ड डेटा हो सकता है जो इस कलेक्शन एंट्री को richSnippet में जोड़ता हो:
'review': {
'ratingstars': '3.0',
'ratingcount': '1024',
},
Programmable Search Element Control API (V2)
google.search.cse.element ऑब्जेक्ट, इन स्टैटिक फ़ंक्शन को पब्लिश करता है:
| फ़ंक्शन | ब्यौरा | ||||||
|---|---|---|---|---|---|---|---|
.render(componentConfig, opt_componentConfig) |
खोज एलिमेंट रेंडर करता है.
पैरामीटर
|
||||||
.go(opt_container) |
बताए गए कंटेनर में सभी खोज एलिमेंट टैग/क्लास को रेंडर करता है.
पैरामीटर
|
||||||
.getElement(gname) |
gname से एलिमेंट ऑब्जेक्ट की जानकारी मिलती है. अगर वह नहीं मिलता है, तो 'शून्य' डालें.
दिखाए गए
यह कोड, सर्च एलिमेंट "element1" में क्वेरी "news" को एक्ज़ीक्यूट करता है: var element = google.search.cse.element.getElement('element1');
element.execute('news');
|
||||||
.getAllElements() |
gname का इस्तेमाल करके, बनाए गए सभी एलिमेंट ऑब्जेक्ट का मैप दिखाता है. |