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

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

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

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

تزيّن معاودة الاتصال ببداية البحث التالية كل طلب بحث باليوم الحالي. من الأسبوع.

مثال على معاودة الاتصال لبدء البحث
<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 Cloud من محتوى نتائج البحث
<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>