نمونه‌های پاسخ به تماس عنصر جستجوی بیشتر

این صفحه مجموعه‌ای از نمونه‌های استفاده از بازخوانی عناصر جستجو را در خود جای داده است. آنها مکمل نمونه های موجود در بخش Callbacks سند Custom 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 &lt 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 تبدیل شود. 

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 نشان داد که چگونه از callback برای ارائه یک نسخه بسیار ساده از نتایج استفاده کنید. مثال دیگری نشان می‌دهد که چگونه می‌توان داده‌های نتایج را از پاسخ به تماس آماده نتایج نگهداری کرد و آن را به نتایج رندر شده ارسال کرد، جایی که می‌توان از آن برای تزئین صفحه نمایش نتایج استاندارد استفاده کرد.

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

از محتوای نتایج جستجو یک ابر کلمه ایجاد کنید 
<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 نوشته شده است. روی اکثر مرورگرها اجرا می شود، اما باید برای اینترنت اکسپلورر و چند مرورگر قدیمی دیگر به جاوا اسکریپت/ES5 تبدیل شود. 

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>