المزيد من الأمثلة على معاودة الاتصال بعناصر البحث

تحتوي هذه الصفحة على مجموعة متنوعة من الأمثلة على استخدام عمليات استدعاء عناصر البحث. كما أنّها تكمّل الأمثلة الواردة في قسم معاودة الاتصال في مستند Custom Search Element API.

أمثلة على بدء البحث لمعاودة الاتصال

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

يؤدي استدعاء بدء البحث التالي إلى إضافة كل طلب بحث حسب اليوم الحالي من الأسبوع.

مثال على معاودة الاتصال لبدء البحث 
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const mySearchStartingCallback = (gname, query) => {
  const dayOfWeek = new Date().getDay();
  console.log(dayOfWeek);
  var days = {
        "0": "Sunday",
        "1": "Monday",
        "2": "Tuesday",
        "3": "Wednesday",
        "4": "Thursday",
        "5": "Friday",
        "6": "Saturday"
    };

    return query + ' ' + days[dayOfWeek];
};
// Install the callback.
window.__gcse || (window.__gcse = {});
  window.__gcse.searchCallbacks = {
    image: {
      starting: mySearchStartingCallback,
    },
    web: {
      starting: mySearchStartingCallback,
    },
};

ضمِّن هذه العناصر في HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

أمثلة على معاودة الاتصال المعروضة على النتائج

تصلح النتائج المعروضة لمعاودة الاتصال لتعديل الصفحة بعد ملؤها بالنتائج. صُمّمت هذه الميزة لتسهيل تعديل عرض النتائج بدون اشتراط معاودة الاتصال لتحمل المسؤولية الكاملة عن عرض النتائج.

يوضّح المثال التالي تطبيقان للنتائج المعروضة لمعاودة الاتصال ولا تعملان على النتائج.

تحديد صفحة النتائج الأخيرة

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

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
    var searchresults= document.getElementsByClassName("gsc-cursor-page");
    var index= document.getElementsByClassName("gsc-cursor-current-page");
    if(index.item(0).innerHTML == searchresults.length){
       alert("This is the last results page");
    }
};

تثبيت ميزة معاودة الاتصال 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

ضمِّن هذه العناصر في HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
زيادة حجم خط روابط "المؤشر"

يؤدي هذا العرض التوضيحي لاستدعاء النتائج المعروضة إلى زيادة حجم خط أرقام "المؤشر" التي تختار صفحات النتائج.

حجم الخط التلقائي هو 12 بكسل. هنا، نزيدها إلى 20 بكسل. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
   document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};

تثبيت ميزة معاودة الاتصال 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

ضمِّن هذه العناصر في HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
استخدام الأحرف لتصنيفات "المؤشر"

تؤدي معاودة الاتصال بالنتائج المعروضة إلى تغيير روابط الصفحة في "المؤشر" من أرقام إلى أحرف. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
    var arr = document.getElementsByClassName('gsc-cursor-page');
    var alp = ['A','B','C','D','E','F','G','H','I','J','K','L',
      'M','N','O','p','Q','R','S','T','U','V','W','X','Y','Z'];
    for (var i = 0; i < arr.length; i++) {
        arr[i].innerHTML = alp[i];
    }
};

تثبيت ميزة معاودة الاتصال 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

ضمِّن هذه العناصر في HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

أمثلة على معاودة الاتصال بالنتائج الجاهزة

عرض النتائج بخلفيات بألوان بديلة

تؤدي تنسيقات معاودة الاتصال هذه إلى استخدام خلفيات مضيئة وخلفيات داكنة بديلة. 

<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

ملاحظة: هذه التعليمة البرمجية مكتوبة بلغة JavaScript/ES6. يعمل هذا الوضع على معظم المتصفحات، ولكن يجب تحويله إلى JavaScript/ES5 في متصفّح Internet Explorer وبعض المتصفحات القديمة الأخرى. 

barredResultsRenderedCallback = function(gname, query, promoElts, resultElts){
  const colors = ['Gainsboro', 'FloralWhite'];
  let colorSelector = 0;
  for (const result of resultElts) {
    result.style.backgroundColor = colors[colorSelector];
    colorSelector = (colorSelector + 1) % colors.length;
  }
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: barredResultsRenderedCallback,
  },
};

ضمِّن هذه العناصر في HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

غيمة الكلمات

ويتمثل التطبيق الواضح لاستدعاء النتائج الجاهزة في عرض نتائج البحث بتنسيق يصعب الوصول إليه باستخدام استدعاء النتائج المعروضة لتعديل ترميز HTML. تبدأ استدعاء النتائج الجاهزة بعلامة div فارغة. أحد الأمثلة في مستند Search Element API يوضّح كيفية استخدام ميزة معاودة الاتصال لعرض نسخة بسيطة جدًا من النتائج. أوضح مثال آخر طريقة الاحتفاظ ببيانات النتائج من استدعاء النتائج الجاهزة وتمريرها إلى استدعاء النتائج المعروضة حيث يمكن استخدامها لتزيين النتائج العادية التي يتم عرضها.

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

إنشاء سحابة Word من محتوى نتائج البحث 
<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<style>
  #container {
    width: 100%;
    height: 4.5in;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>

ملاحظة: هذه التعليمة البرمجية مكتوبة بلغة JavaScript/ES6. ويمكن تشغيله على معظم المتصفّحات، ولكن يجب تحويله إلى JavaScript/ES5 في متصفّح Internet Explorer وبعض المتصفحات القديمة الأخرى. 

const resultsReadyWordCloudCallback = function(
        name, q, promos, results, resultsDiv) {
    const stopWords = new Set()
      .add('a')
      .add('A')
      .add('an')
      .add('An')
      .add('and')
      .add('And')
      .add('the')
      .add('The');

    const words = {};
    const splitter = /["“”,\?\s\.\[\]\{\};:\-\(\)\/!@#\$%\^&*=\+\*]+/;
    if (results) {
        for (const {contentNoFormatting, titleNoFormatting} of results) {
            const wordArray = (contentNoFormatting + ' ' + titleNoFormatting)
              .split(splitter)
              .map(w => w.toLowerCase());
            for (const w of wordArray) {
                if (w && !stopWords.has(w)) {
                    words[w] = (words[w] + 1) || 1;
                }
            }
        }
    }
    const dataForChart = [];
    for (const key in words) {
        const val = words[key];
        dataForChart.push({
            'x': key,
            'value': val,
        });
    }

    const container = document.createElement('div');
    resultsDiv.appendChild(container);
    container.id = 'container';
    // create a tag (word) cloud chart
    const chart = anychart.tagCloud(dataForChart);
    // set a chart title
    chart.title(`Words for query: "${q}"`)
    // set an array of angles at which the words will be laid out
    chart.angles([0, 45, 90, 135])
    // display the word cloud chart
    chart.container(container);
    chart.draw();
    return true; // Don't display normal search results.
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
    web: {
        ready: resultsReadyWordCloudCallback,
    },
};

ضمِّن هذه العناصر في HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

مثال على معاودة الاتصال من جزأين

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

أحد الأمثلة على ذلك هو استبعاد لوحة المعاينة التي تظهر عند النقر على نتيجة من البحث بالصور. من خلال معاودة الاتصال المكوّنة من جزأين، يمكننا جعل رابط نتائج الصور يؤدي مباشرةً إلى المواقع الإلكترونية المقابلة بدلاً من عرض معاينة للصورة عند النقر عليه.

تجاوز معاينات الصور 
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const makeTwoPartCallback = () => {
  let urls;
  const readyCallback = (name, q, promos, results, resultsDiv) => {
    urls = [];
    for (const result of results) {
      urls.push(result['contextUrl']);
    }
  };
  const renderedCallback = (name, q, promos, results) => {
    const removeEventListeners = element => {
      const clone = element.cloneNode(true);
      element.parentNode.replaceChild(clone, element);
      return clone;
    };
    for (let i = 0; i < results.length; ++i) {
      const element = removeEventListeners(results[i]);
      element.addEventListener('click', () => window.location.href = urls[i]);
    }
  };
  return {readyCallback, renderedCallback};
};
const {
  readyCallback: imageResultsReadyCallback,
  renderedCallback: imageResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  image: {
    ready: imageResultsReadyCallback,
    rendered: imageResultsRenderedCallback,
  },
};

ضمِّن هذه العناصر في HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>