Programmable Search Element Control API

Programlanabilir Arama Motoru bileşenlerini (arama kutuları ve arama sonuçları sayfaları) ve diğer web uygulamalarınızda HTML biçimlendirmesini kullanarak değişiklikler yapabilirsiniz. Bu Programlanabilir Arama Motorları öğeleri, kullanıcı tarafından depolanan ayarlara dayalı olarak oluşturulan bileşenlerden oluşur. programlanabilir Arama sunucusu bilgilerini de görürsünüz.

JavaScript'in tamamı eşzamansız olarak yüklenir. Böylece web sayfanız tarayıcı Programlanabilir Arama Motoru JavaScript'ini getirirken yüklenmeye devam eder.

Giriş

Bu belgede, Programlanabilir Arama Motoru eklemek için temel bir model sunulmaktadır öğelerinin açıklamalarıyla birlikte, açıklama yapılandırılabilir bileşenler ve esnek JavaScript API'si ile sunulur.

Kapsam

Bu dokümanda Programmable Search Engine Control API.

Tarayıcı uyumluluğu

Programlanabilir Arama Motoru tarafından desteklenen tarayıcıların listesi şurada bulunabilir: burada bulabilirsiniz.

Kitle

Bu doküman, Programlanabilir Google API'sini eklemek isteyen geliştiricilere yöneliktir. Sayfalarında arama işlevi.

Programlanabilir Arama Öğeleri

Sayfanıza Programlanabilir Arama Öğesi eklemek için HTML işaretlemesini kullanabilirsiniz. Her biri öğesi, en az bir bileşenden oluşur: bir arama kutusu, arama bloğu ya da her ikisini de seçebilirsiniz. Arama kutusu, aşağıdakilerden herhangi birinde kullanıcı girişini kabul eder yöntemler:

  • Metin giriş alanına girilen bir arama sorgusu
  • Bir URL'ye yerleştirilmiş sorgu dizesi
  • Programatik yürütme

Ayrıca, arama sonucu bloku şu yöntemleri kullanabilirsiniz:

  • Bir URL'ye yerleştirilmiş sorgu dizesi
  • Programatik yürütme

Aşağıdaki Programlanabilir Arama Öğesi türleri kullanılabilir:

Öğe türü Bileşenler Açıklama
standart <div class="gcse-search"> Arama kutusu ve arama sonuçları, aynı <div> içinde gösterilir.
iki sütunlu <div class="gcse-searchbox"> ve <div class="gcse-searchresults"> Bir tarafında arama sonuçları, bir arama kutusu gösterilen iki sütunlu düzen diğeri. İki sütunlu modda birden çok öğe eklemeyi planlıyorsanız web sayfanızda bir öğeyi eşlemek için gname özelliğini arama sonucu bloku içeren arama kutusu.
yalnızca arama kutusu <div class="gcse-searchbox-only"> Bağımsız bir arama kutusu.
searchresults-only <div class="gcse-searchresults-only"> Bağımsız bir arama sonuçları bloğu.

Web sayfanıza istediğiniz sayıda geçerli Arama Öğesi ekleyebilirsiniz. İki sütun için tüm gerekli bileşenleri (arama kutusu ve arama sonuç bloğu) mevcut olmalıdır.

Aşağıda basit bir Arama Öğesi örneği verilmiştir:

<!-- 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>

Programlanabilir Arama Öğeleri'ni kullanarak farklı düzen seçenekleri oluşturun

Programlanabilir Arama Motoru kontrol panelinin Görünüm ve İzlenim sayfasında aşağıdaki düzen seçenekleri kullanılabilir. Programlanabilir Arama Öğeleri'ni kullanarak düzen seçenekleri oluşturma ile ilgili bazı genel yönergeleri burada bulabilirsiniz. Bu seçeneklerden herhangi birinin demosunu görmek için bağlantıyı tıklayın.

Option Bileşenler
Tam genişlik <div class="gcse-search">
Kompakt <div class="gcse-search">
İki sütunlu <div class="gcse-searchbox">, <div class="gcse-searchresults">
İki sayfa İlk sayfada <div class="gcse-searchbox-only">, ikinci sayfada <div class="gcse-searchresults-only"> (veya diğer bileşenler).
Yalnızca sonuçlar <div class="gcse-searchresults-only">
Google tarafından barındırılan <div class="gcse-searchbox-only">

Düzen seçenekleri hakkında daha fazla bilgi edinin.

Programlanabilir Arama Öğelerini Özelleştirme

Renkleri, yazı tipini veya bağlantı stilini özelleştirmek için programlanabilir arama motorunuzun Görünüm ve İzlenim sayfasına gidin.

Şurada oluşturulan yapılandırmaların üzerine yazmak için isteğe bağlı özellikleri kullanabilirsiniz: Programlanabilir Arama Motoru Kontrol panelinde oturum açın. Bu sayede, sayfaya özel arama deneyimi oluşturabilirsiniz. Örneğin, aşağıdaki kod, bir sonuç sayfası açan bir arama kutusu oluşturur (http://www.example.com?search=lady+gaga) bağlantısını tıklayarak yeni bir pencerede açabilirsiniz. The value of queryParameterName özelliği, kullanıcı sorgu dizesiyle birlikte için kullanılır.

queryParameterName özelliğinin data- önekine sahip olduğuna dikkat edin. Bu ön ek tüm özellikler için gereklidir.

<div class="gcse-searchbox-only" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search">

Aşağıdaki gibi özellikleri etkinleştirmek için Programlanabilir Arama Motoru denetim masasını kullandıysanız otomatik tamamlama veya hassaslaştırmalar için özellikleri kullanabilirsiniz. bu özellikleri özelleştirebilirsiniz. Bu özellikleri kullanarak belirttiğiniz tüm özelleştirmeler kontrol panelinde yapılan ayarları geçersiz kılar. Aşağıdaki örnekte aşağıdaki özelliklere sahip iki sütunlu bir Arama Öğesi:

  • Geçmiş yönetimi etkin
  • Görüntülenen maksimum otomatik tamamlama sayısı 5 olarak ayarlandı
  • Ayrıntılandırmalar bağlantı olarak görüntülenir.

<div class="gcse-searchbox" data-enableHistory="true" data-autoCompleteMaxCompletions="5">
<div class="gcse-searchresults" data-refinementStyle="link">

Desteklenen özellikler

Özellik Tür Açıklama Bileşen
Genel (General)
gname Dize (İsteğe bağlı) Arama Öğesi nesnesi için bir ad. Adlar, ilişkili bir bileşeni ada göre girin veya bir searchbox öğesini eşlemek için searchresults bileşenine sahip bir bileşen olacak. Bu sağlanmazsa Programlanabilir Arama Motoru, gname web sayfasındaki bileşenlerin sırası. Örneğin, ilk adsız searchbox-only, gname "searchbox-only0" değerine sahip ikincisinde de gname "seachbox-only1" bulunur. Şuradaki bir bileşen için otomatik olarak oluşturulan gname değerine dikkat edin: iki sütunlu düzen two-column olacak. Aşağıdaki örnek bir searchbox bağlamak için storesearch gname'ini kullanıyor searchresults bileşenine sahip bir bileşen içerir: 
<div class="gcse-searchbox" data-gname="storesearch"></div>
<div class="gcse-searchresults" data-gname="storesearch"></div>

Bir nesneyi alırken, birden fazla bileşen aynıysa gname, Programlanabilir Arama Motoru sayfasını ziyaret edin.

 Tümü
autoSearchOnLoad Boole URL'ye yerleştirilmiş sorguya göre bir arama yürütülüp yürütülmeyeceğini belirtir yüklenmeye devam eder. Bir sorgu dizesinin URL'de bulunması gerektiğini unutmayın otomatik aramayı yürütür. Varsayılan: true. Tümü
enableHistory Boole true ise tarayıcı için geçmiş yönetimini etkinleştirir Geri ve İleri düğmelerini kullanın. Bir demo izleyin.

arama kutusu

yalnızca arama kutusu
queryParameterName Dize Sorgu parametresinin adı - örneğin, q (varsayılan) veya query. Bu, URL'ye gömülü olacaktır (örneğin, http://www.example.com?q=lady+gaga). Sorgu parametresinin adı, yükleme sırasında tek başına otomatik aramayı tetiklemez. Sorgu dizesinin URL'de bulunması gerekir. Tümü
resultsUrl URL Sonuç sayfasının URL'si. (Varsayılan, Google tarafından barındırılan sayfadır.) yalnızca arama kutusu
newWindow Boole Sonuçlar sayfasının yeni bir pencerede açılıp açılmayacağını belirtir. Varsayılan: false. yalnızca arama kutusu
ivt Boole

Bu parametre, izin vermek istediğinizi Google'a bildiren bir boole sağlamanıza olanak tanır. geçersiz trafiğe özel çerez kullanan reklamlar ve hem izin verilen hem de izin verilen cihazlarda yerel depolama izin verilmeyen trafik.

true Bu parametre mevcut olmadığında veya "true" olarak ayarlandığında ne zaman geçersiz trafiğe özel çerez oluşturur ve yerel depolama alanını yalnızca izin verilen trafikte kullanır.

false Bu parametreyi "false" olarak ayarladığınızda geçersiz bir trafiğe özel çerezi oluşturun ve hem izin verilen hem de izin verilmeyen trafikte yerel depolama alanını kullanın.

Varsayılan: false

Örnek kullanım: <div class="gcse-search" data-ivt="true"></div>

arama sonuçları

searchresults-only
mobileLayout Dize

Mobil düzen stillerinin mobil cihazlar için kullanılıp kullanılmayacağını belirtir.

enabled Yalnızca mobil cihazlar için mobil düzeni kullanır.

disabled, hiçbir cihaz için mobil düzeni kullanmaz.

forced Tüm cihazlar için mobil düzeni kullanır.

Varsayılan: enabled

Örnek kullanım: <div class="gcse-search" data-mobileLayout="disabled"></div>

Tümü
Otomatik tamamlama
enableAutoComplete Boole Yalnızca Programlanabilir Arama Motoru kontrol panelinde otomatik tamamlama etkinleştirildiyse kullanılabilir. true otomatik tamamlamayı etkinleştirir. Tümü
autoCompleteMaxCompletions Tamsayı Görüntülenecek maksimum otomatik tamamlama sayısı.

arama kutusu

yalnızca arama kutusu
autoCompleteMaxPromotions Tamsayı Otomatik tamamlamada gösterilecek maksimum promosyon sayısı.

arama kutusu

yalnızca arama kutusu
autoCompleteValidLanguages Dize Otomatik tamamlamanın ayarlanması gereken dillerin virgülle ayrılmış listesi etkin. Desteklenen diller.

arama kutusu

yalnızca arama kutusu
Ayrıntılandırmalar
defaultToRefinement Dize Yalnızca Programlanabilir Arama Motoru denetim masası. Varsayılan ayrıntılandırma etiketini display.Not: Bu özellik, Google Tarafından Barındırılan düzende desteklenmez. Tümü
refinementStyle Dize Kabul edilebilir değerler: tab (varsayılan) ve link. link yalnızca resim arama devre dışıysa veya görsel arama etkin ancak web araması devre dışı.

arama sonuçları

searchresults-only
Resim arama
enableImageSearch Boole Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

true ise resim aramayı etkinleştirir. Görsel sonuçları şurada gösterilecek: ayrı bir sekme.

arama sonuçları

searchresults-only
defaultToImageSearch Boole Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

true ise, arama sonuçları sayfasında görsel arama sonuçları gösterilir. varsayılan olarak. Web sonuçları ayrı bir sekmede sunulur.

Tümü
imageSearchLayout Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Görsel arama sonuçları sayfasının düzenini belirtir. Kabul edilebilir değerler classic, column veya popup.

arama sonuçları

searchresults-only
imageSearchResultSetSize Tam sayı, Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Resim arama için ayarlanan arama sonuçlarının maksimum boyutunu belirtir. Örneğin large, small, filtered_cse, 10.

 Tümü
image_as_filetype Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Sonuçları, belirtilen uzantıya ait dosyalarla kısıtlar.

Desteklenen uzantılar şunlardır: jpg, gif, png, bmp, svg, webp, ico, raw.

Tümü
image_as_oq Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Mantıksal VEYA kullanarak arama sonuçlarını filtreleyin.

"term1" ifadesini içeren arama sonuçları istiyorsanız örnek kullanım veya "terim2":<div class="gcse-search" data-image_as_oq="term1 term2"></div>

Tümü
image_as_rights Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Lisanslamaya dayalı filtreler.

Desteklenen değerler: cc_publicdomain, cc_attribute, cc_sharealike, cc_noncommercial, cc_nonderived ve bunların kombinasyonları.

Tipik kombinasyonlara bakın.

Tümü
image_as_sitesearch Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Sonuçları belirli bir sitedeki sayfalarla sınırlandırın.

Örnek kullanım: <div class="gcse-search" data-image_as_sitesearch="example.com"></div>

Tümü
image_colortype Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Aramayı siyah beyaz (mono), gri tonlamalı veya renkli resimlerle kısıtlar. Desteklenen değerler: mono, gray, color.

Tümü
image_cr Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Arama sonuçlarını, kaynağı belirli bir ülke olan dokümanlarla kısıtlar.

Desteklenen değerler

Tümü
image_dominantcolor Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Aramayı belirli bir baskın rengin resimleriyle kısıtlar. Desteklenen değerler: red, orange, yellow, green, teal, blue, purple, pink, white, gray, black, brown.

Tümü
image_filter Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Arama sonuçlarını otomatik olarak filtreleme.

Desteklenen değerler: 0/1

Örnek kullanım: <div class="gcse-search" data-image_filter="0"></div>

Tümü
image_gl Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır. Menşe ülkesi, parametre değeriyle eşleşen arama sonuçlarını geliştirir.

Desteklenen değerler

Tümü
image_size Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Şunlardan biri olabileceği belirtilen boyuttaki resimleri döndürür: icon, small, medium, large, xlarge, xxlarge veya huge.

Tümü
image_sort_by Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Sonuçları tarih veya başka yapılandırılmış içerikler kullanarak sıralayın.

Alaka düzeyine göre sıralamak için boş bir dize (image_sort_by="") kullanın.

Örnek kullanım: <div class="gcse-search" data-image_sort_by="date"></div>

Tümü
image_type Dize Yalnızca Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

Aramayı belirli türdeki görsellerle kısıtlar. Desteklenen değerler: clipart (Küçük resim), face (Kişilerin yüzleri), lineart (Çizimler), stock (Stok fotoğraflar), photo (Fotoğraflar) ve animated (Animasyonlu GIF'ler).

Tümü
Web araması
disableWebSearch Boole true ise web aramasını devre dışı bırakır. Genellikle yalnızca aşağıdaki durumlarda kullanılır: Programlanabilir Arama Motoru kontrol panelinde görsel arama etkinleştirilmiş olmalıdır.

arama sonuçları

searchresults-only
webSearchQueryAddition Dize Mantıksal VEYA kullanılarak arama sorgusuna fazladan terimler eklendi.

Örnek kullanım: <div class="gcse-search" data-webSearchQueryAddition="term1 term2"></div>

 Tümü
webSearchResultSetSize Tam sayı, Dize Sonuç kümesinin maksimum boyutu. Geçerlilik kapsamı: hem görsel arama hem de web araması. Varsayılan ayar, sayfa düzenine ve Programlanabilir Arama Motoru'nun tüm web'de arama yapacak şekilde mi yapılandırılmış yoksa yalnızca siteler. Kabul edilebilir değerler şunlardır:
  • 1 ile 20 arasında bir tam sayı
  • small: Küçük bir sonuç grubu (genellikle 4 sonuç) isteğinde bulunur ekleyebilirsiniz.
  • large: Büyük bir sonuç grubu (genellikle 8) isteğinde bulunur sonuç gösterebileceksiniz.
  • filtered_cse: Sayfa başına en fazla 10 sonuç isteğinde bulunur. maksimum 10 sayfa veya 100 sonuç olabilir.
 Tümü
webSearchSafesearch Dize Şu durumda belirtir: SafeSearch web araması sonuçları için etkinleştirildi. off ve active değerleri kabul edilir. Tümü
as_filetype Dize Sonuçları, belirtilen uzantıya ait dosyalarla kısıtlar. Google tarafından dizine eklenebilen dosya türlerinin listesini Search Console Yardım Merkezi'nde bulabilirsiniz.

Tümü
as_oq Dize Mantıksal VEYA kullanarak arama sonuçlarını filtreleyin.

"term1" ifadesini içeren arama sonuçları istiyorsanız örnek kullanım veya "terim2":<div class="gcse-search" data-as_oq="term1 term2"></div>

 Tümü
as_rights Dize Lisanslamaya dayalı filtreler.

Desteklenen değerler: cc_publicdomain, cc_attribute, cc_sharealike, cc_noncommercial, cc_nonderived ve bunların kombinasyonları.

Tipik kombinasyonlar için https://wiki.creativecommons.org/wiki/CC_Search_integration adresine bakın.

Tümü
as_sitesearch Dize Sonuçları belirli bir sitedeki sayfalarla sınırlandırın.

Örnek kullanım: <div class="gcse-search" data-as_sitesearch="example.com"></div>

 Tümü
cr Dize Arama sonuçlarını, kaynağı belirli bir ülke olan dokümanlarla kısıtlar.

Desteklenen değerler

Örnek kullanım: <div class="gcse-search" data-cr="countryFR"></div>

 Tümü
filter Dize Arama sonuçlarını otomatik olarak filtreleme.

Desteklenen değerler: 0/1

Örnek kullanım: <div class="gcse-search" data-filter="0"></div>

 Tümü
gl Dize Menşe ülkesi, parametre değeriyle eşleşen arama sonuçlarını geliştirir.

Bu özellik yalnızca dil değeri ayarıyla birlikte kullanılabilir.

Desteklenen değerler

Örnek kullanım: <div class="gcse-search" data-gl="fr"></div>

 Tümü
lr Dize Arama sonuçlarını, belirli bir dilde yazılmış dokümanlarla kısıtlar.

Desteklenen değerler

Örnek kullanım: <div class="gcse-search" data-lr="lang_fr"></div>

Tümü
sort_by Dize Sonuçları tarih veya başka yapılandırılmış içerikler kullanarak sıralayın. Özellik değeri, programlanabilir arama ağının Sonuç Sıralama ayarlarında sunulan seçeneklerden biri olmalıdır.

Alaka düzeyine göre sıralamak için boş bir dize (sort_by="") kullanın.

Örnek kullanım: <div class="gcse-search" data-sort_by="date"></div>

 Tümü
Arama sonuçları
enableOrderBy Boole Sonuçların alaka düzeyine, tarihe veya etikete göre sıralanmasını sağlar. Tümü
linkTarget Dize Bağlantı hedefini ayarlar. Varsayılan: _blank.

arama sonuçları

searchresults-only
noResultsString Dize Sorguyla eşleşen sonuç olmadığında görüntülenecek varsayılan metni belirtir. Varsayılan sonuç dizesi, yerelleştirilmiş bir dizeyi tüm desteklenen, özelleştirilmiş olan dilde ise desteklenmiyor.

arama sonuçları

searchresults-only
resultSetSize Tam sayı, Dize Sonuç kümesinin maksimum boyutu. Örneğin, large, small, filtered_cse, 10. İlgili içeriği oluşturmak için kullanılan varsayılan ayar, düzene ve motorun arama yapacak şekilde yapılandırılıp yapılandırılmadığına bağlıdır tüm web'de veya yalnızca belirtilen sitelerde Tümü
safeSearch Dize Güvenli Arama hem web hem de görsel arama için etkinleştirilmiştir. Kabul edilen değerler: off ve active. Tümü

Geri çağırma işlevleri

Geri Arama Sırası Diyagramı
Search Element JavaScript&#39;ten gelen geri çağırmaların sıra şeması

Geri çağırma işlevleri, arama öğesi başlatma ve arama işlemlerinin ayrıntılı kontrolünü destekler. Search Element JavaScript'e genel __gcse üzerinden kaydedilmişler. nesnesini tanımlayın. Geri Aramaları Kaydet, tüm geri çağırmaların kaydını kullanılabilir.

Geri Aramaları Kaydedin

  window.__gcse = {
    parsetags: 'explicit', // Defaults to 'onload'
    initializationCallback: myInitializationCallback,
    searchCallbacks: {
      image: {
        starting: myImageSearchStartingCallback,
        ready: myImageResultsReadyCallback,
        rendered: myImageResultsRenderedCallback,
      },
      web: {
        starting: myWebSearchStartingCallback,
        ready: myWebResultsReadyCallback,
        rendered: myWebResultsRenderedCallback,
      },
    },
  };

Başlatma Geri Çağırması

İlk kullanıma hazırlama geri çağırması, Search Element JavaScript'i aramayı oluşturmadan önce çağrılır öğelerini DOM'de bulabilirsiniz. parsetags, şu aralıkta explicit değerine ayarlanırsa: __gcse için Arama Öğesi JavaScript'i, Arama Öğelerini oluşturmayı ilk kullanıma hazırlama geri çağırması (Geri Çağırmaları Kaydet'te gösterildiği gibi). Bu, oluşturulacak öğeleri seçmek veya oluşturma öğelerini, öğeler hazırlana kadar ertelemek için kullanılabilir. gerekir. Ayrıca, öğelerin özelliklerini geçersiz kılabilir; bir Kontrol Paneli veya HTML özellikleri aracılığıyla varsayılan olarak web'e ayarlanacak şekilde yapılandırılan arama kutusu arama kutusuna yazabilirsiniz veya Programlanabilir Arama Motoru formu aracılığıyla gönderilen sorguların bir arama sonuçları öğesi içinde yürütüldüğünden emin olun. Demoyu izleyin.

Başlatma geri çağırmasının rolü, parsetags değeri ile kontrol edilir. __gcse mülküdür.

  • Değeri onload ise Arama Öğesi JavaScript, sayfadaki tüm Arama Öğelerini otomatik olarak oluşturur. İlk kullanıma hazırlama geri çağırması yine de çağrılır, ancak Arama Öğeleri'nin oluşturulmasından sorumlu değildir.
  • Değeri explicit ise Arama Öğesi JavaScript'i oluşturulmaz Arama Öğeleri. Geri çağırma, bunları render() işlevi, veya tüm Arama Öğelerini go() işleviyle oluşturun

Aşağıdaki kodda, bir arama kutusunun, arama sonuçlarıyla birlikte div, explicit ayrıştırma geri çağırması ve ilk kullanıma hazırlama geri çağırması ile:

ziyaret edin.
Başlatma Geri Çağırması Örneği

id değerine sahip bir <div> eklememiz gerekiyor nerede bulacağımızı görelim: 

    <div id="test"></div>
. Bu JavaScript'i <div> öğesinin arkasına ekleyin. Lütfen test, kaynak adını belirlemek için kullandığımız 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
};

Arama Öğesi'ni yüklemeye başlamak için bu HTML'yi ekleyin. cx değerini src ifadesini kendi cx değerinizle birlikte kullanın. 

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

Geri Aramalarda Ara

Search Element JavaScript, JavaScript'te çalışan altı geri çağırmayı destekler. anlatacağım. Arama geri çağırmaları çiftler, bir web araması geri çağırma ve eşleşen resim arama geri çağırması gelir:

  • Arama Başlıyor
    • Resim arama için
    • Web araması için
  • Sonuçlar hazır
    • Resim arama için
    • Web araması için
  • Sonuçlar oluşturuldu
    • Resim arama için
    • Web araması için

İlk kullanıma hazırlama geri çağırması gibi arama geri çağırmaları da __gcse nesnesindeki girişler kullanılarak yapılandırıldı. Bu işlem, Arama Öğesi JavaScript başlar. Başlatmadan sonra __gcse üzerinde yapılan değişiklikler yoksayılır.

Bu geri çağırmaların her biri gName Search Element'i (Arama Öğesi) bağımsız değişken olarak kullanın. gname, bir sayfada birden fazla arama olduğunda kullanışlıdır. Arama yapma öğesi, data-gname özelliğini kullanan bir gname değeri olarak değiştirilmelidir:

<div class="gcse-searchbox" data-gname="storesearch"></div>

HTML, gname adını tanımlamazsa, Search Element JavaScript'i benzersiz bir tutarlılığını korur.

Görsel/Web Arama Başlangıcı Geri Çağırma

Arama başlatma geri çağırmaları, Search Element JavaScript isteklerinden hemen önce çağrılır sunucusundan gelen arama sonuçlarını gösterir. Örneğin, Arkadaş Bitkiler hizmetine örnek olarak günün yerel saatini sorgudaki değişiklikleri kontrol etmek için kullanılır. 

searchStartingCallback(gname, query)
gname
Search Element'in tanımlayıcı dizesi
query
kullanıcı tarafından girilen değer (büyük olasılıkla arama tarafından değiştirilmiştir) öğesinin JavaScript'idir.)

Geri çağırma, bu arama için sorgu olarak kullanılması gereken değeri döndürür. Bir dize boşsa döndürülen değer yoksayılır ve çağrı yapan, değiştirilmemiş sorguyu kullanır.

Alternatif olarak, geri çağırma işlevini __gcse nesnesine veya geri çağırmayı JavaScript ile nesneye dinamik bir şekilde ekleyin: 

window.__gcse['searchCallbacks']['web']['starting'] = function(gname, query) {...};
Geri Çağırma Başlayan Örnek Arama

Şu süre içinde geri çağırma başlatan örnek arama: Geri Çağırma Başlayan Örnek Arama, morninglardan birini ekler veya günün saatine bağlı olarak sorguya afternoon ekleyin.

Arama Başlangıcı Geri Çağırma Örneği 
    const myWebSearchStartingCallback = (gname, query) => {
      const hour = new Date().getHours();
      return query + (hour < 12 ? ' morning' : ' afternoon');
    };
    window.myImageSearchStartingCallbackName = myWebSearchStartingCallback;

Bu geri çağırmayı window.__gcse: uygulamasında yükleyin 

  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>

Görsel/Web Arama Sonuçları-Hazır Geri Arama

Bu geri çağırma işlevleri, Search Element JavaScript'in tanıtımları oluşturmadan ve sonuç. Tanıtımlar oluşturan ve normal özelleştirmeyle belirtilemez. 

resultsReadyCallback(gname, query, promos, results, div)
gname
Search Element'in tanımlayıcı dizesi
query
bu sonuçları üreten sorgu
promos
eşleşenlere karşılık gelen promosyon nesneleri dizisi promosyon kullanır. Promosyon nesnesi tanımına bakın.
results
sonuç nesneleri dizisidir. Bkz. sonuç nesnesi tanımı.
div
DOM'de, normal koşullarda Arama Öğesi'nin ve arama sonuçlarına yer verebilirsiniz. Normalde, Search Element JavaScript'in bu div öğesi dolduruluyor, ancak bu geri çağırma, sonuçların otomatik olarak oluşturulmasını durdurabilir. ve sonuçları oluşturmak için bu div öğesini kullanın.
ziyaret edin.
'nı inceleyin.

Bu geri çağırma bir true değeri döndürürse Arama Öğesi JavaScript'i kendi sayfa altbilgisi üzerinde çalışır.

Örnek Sonuçlar Hazır Geri Çağırma

Şu zaman dilimi içinde resultsReady geri çağırması: Örnek Sonuçlar Hazır Geri Çağırma, varsayılan sunuyu geçersiz kılar promosyonları ve sonuçları çok basit bir şekilde değiştirebilirsiniz.

Sonuçlar için Hazır Geri Çağırma Örneği 
    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;
    };

Bu geri çağırmayı window.__gcse: uygulamasında yükleyin 

  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>

Arama başlatma geri çağırmada olduğu gibi, yukarıdaki yöntem geri çağırmayı __gcse nesne algılandı.

Görsel/Web Araması Sonuçları - Oluşturulan Geri Arama

Bu geri çağırma işlevleri, Search Element JavaScript'in sayfayı oluşturmadan hemen önce çağrılır altbilgisi) ekleyin. Örnek kullanım alanları, arama sorgusunun öğesi, bunu kaydet onay kutusu veya yanlış olmayan bir bilgi gibi otomatik olarak oluşturulan veya daha fazla bilgi düğmeleri ekleyen bir geri çağırma türü olabilir.

Sonuçlar oluşturulan geri çağırma için promos ve results sonuçlar hazır geri çağırma parametrelerini ararsa bu ayar, ikisi arasında aşağıdaki gibi iletilebilir: 

callback(gname, query, promoElts, resultElts);
gname
Search Element'in tanımlayıcı dizesi
query
arama dizesi
promoElts
promosyon içeren DOM öğeleri dizisi.
resultElts
sonuçları içeren DOM öğeleri dizisi.

Döndürülen değer yok.

Örnek Sonuçlar Oluşturulan Geri Çağırma

Şu zaman dilimi içinde resultsRendered geri çağırması: Örnek Sonuçlar Oluşturulan Geri Çağırma, sahte bir Keep ekler onay kutusunu işaretleyin.

Oluşturulan Geri Çağırma Örneği 
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);
    }
  };

Bu geri çağırmayı window.__gcse: uygulamasında yükleyin 

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>

Geri çağırma oluşturulan sonuçlar için sonuçlara hazır geri çağırmaya iletilen bilgileri, bu verileri yardımcı olabilir. Aşağıdaki örnekte, Sonuçlar hazır geri çağrısından oluşturulan sonuçlara yapılan richSnippet geri arama.

ziyaret edin.
Sonuçlar İçin Hazır Geri Çağırma, Sonuçlarla İşbirliği Yapma Örneği 
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 kurulumunu yaparken aşağıdaki gibi bir kod kullanarak bu geri çağırmayı yükleyin: 
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>

Daha Fazla Geri Arama Örneği

Daha fazla geri çağırma örneği şurada bulunabilir: Diğer Geri Arama Örnekleri dokümanı.

Tanıtım ve Sonuç Özellikleri

JSDoc gösterimini kullanarak promotion ve sonuç nesneleri. Burada, mevcut olabilecek tüm özellikler listelenir. Çoğu özelliğin varlığı promosyonun veya arama sonucunun ayrıntılarına bağlıdır.

Promosyon Mülkleri
{
  content: string,
  image: {
    height: number,
    url: string,
    width: number,
  },
  title: string,
  url: string,
  visibleUrl: string,
}
Sonuç Nesnesi Özellikleri
{
  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,
}

Sonuçlardaki richSnippet, serbest türde bir dizidir nesneler'i tıklayın. Bu dizideki girişlerin değerleri yapılandırılmış veri bulunur. Örneğin, bir inceleme web sitesi şu dizi girişini richSnippet konumuna ekleyen yapılandırılmış veriler: 

'review': {
  'ratingstars': '3.0',
  'ratingcount': '1024',
},

Programmable Search Element Control API (V2)

google.search.cse.element nesnesi şunları yayınlar: statik işlevler:

İşlev Açıklama
.render(componentConfig, opt_componentConfig) Arama Öğesi oluşturur.

Parametreler

Ad Açıklama
componentConfig Programlanabilir Arama Öğesi bileşeni için yapılandırma. Şunları belirtir:
  • div (dize|Öğe): Programlanabilir Arama Öğesi'nin oluşturulacağı div öğesinin veya <div> öğesinin id öğesi.
  • tag (dize): Oluşturulacak bileşenlerin türü. (opt_componentConfig sağlandığında, tag özelliğinin değeri searchbox olmalıdır.) İzin verilen değerler:
    • search: Arama kutusu ve arama sonuçları (birlikte gösterilir)
    • searchbox: Programlanabilir Arama Öğesi'nin arama kutusu bileşeni.
    • searchbox-only: İki sütunlu düzende opt_componentConfig tarafından belirtilen arama sonuçları bloğuyla eşleştirilecek bağımsız bir arama kutusu.
    • searchresults-only: Bağımsız bir arama sonuçları bloğudur. Aramalar, URL'ye yerleştirilmiş bir sorgu parametresi veya programlı yürütme ile tetiklenir.
  • gname (dize): (İsteğe bağlı) Bu bileşen için benzersiz bir ad. Sağlanmazsa Programlanabilir Arama Motoru otomatik olarak bir gname oluşturur.
  • attributes (Nesne): Anahtar:değer çifti biçimindeki isteğe bağlı özellikler. Desteklenen özellikler.
opt_componentConfig İsteğe bağlı. İkinci bileşen yapılandırma bağımsız değişkeni. Kullanıldığı yer: TWO_COLUMN searchresults bileşenini sağlayın. Şunları belirtir:
  • div (dize): <div> öğesinin id veya öğenin oluşturulacağı div öğesidir.
  • tag (dize): Oluşturulacak bileşenlerin türü. Zaman opt_componentConfig sağlandı, tag değeri özelliği searchresults olmalıdır. Ayrıca, componentConfig öğesinin tag özelliği , searchbox olmalıdır.
  • gname (dize): (İsteğe bağlı) Bu bileşen için benzersiz bir ad. Değilse sağlandığında, Programlanabilir Arama Motoru bunun için otomatik olarak bir gname bir bileşenidir. Sağlanmışsa şu içindeki gname ile eşleşmelidir: componentConfig.
  • attributes (Nesne): Key:value biçimindeki isteğe bağlı özellikler eşlemeye devam edin. Desteklenen özellikler.
.go(opt_container) Belirtilen kapsayıcıdaki tüm Search Element etiketlerini/sınıflarını oluşturur.

Parametreler

Ad Açıklama
opt_container Oluşturulacak Arama Öğesi bileşenlerini içeren kapsayıcı. Belirtin: kapsayıcının (dize) veya öğenin kimliğidir. Eğer atlanan, sayfanın Search Element içindeki tüm Programlanabilir Arama Öğesi bileşenleri body etiketi oluşturulacak.
.getElement(gname) gname işlevinden öğe nesnesini alır. Bulunamazsa null değeri döndürün.

Döndürülen element nesnesi aşağıdaki özelliklere sahiptir:

  • gname: Öğe nesnesinin adı. Sağlanmazsa Programlanabilir Arama Motoru nesne için otomatik olarak bir gname oluşturur. Daha fazla bilgi.
  • type: Öğenin türü.
  • uiOptions: Öğeyi oluşturmak için kullanılan son özellikler.
  • execute - function(dize): Programatik sorgu yürütür.
  • prefillQuery - function(string): Arama kutusunu bir sorguyla önceden doldurur dize.
  • getInputQuery - function(): Girişte görüntülenen geçerli değeri alır seçin.
  • clearAllResults - function(): dışındaki her şeyi gizleyerek kontrolü temizler (varsa) yazın.

Aşağıdaki kod "news" sorgusunu yürütür şunu görürsünüz:

var element = google.search.cse.element.getElement('element1');
            element.execute('news');
.getAllElements() gname ile anahtarlanan, başarıyla oluşturulmuş tüm öğe nesnelerinin bir eşlemesini döndürür.