cari

Rumah >hujung hadapan web >tutorial js >Petua Pantas: Cara Menggayakan Carian Custom Google secara manual

Petua Pantas: Cara Menggayakan Carian Custom Google secara manual

Jennifer Aniston
Jennifer Anistonasal
2025-02-17 09:42:10780semak imbas

Quick Tip: How to Style Google Custom Search Manually

mata teras

    Dengan bentuk carian secara manual (tanpa perlu menggunakan tag GCSE khas), anda boleh gaya secara manual Google Custom Search Engine (GCSE), dengan itu memberi anda kawalan yang lebih baik ke atas medan input carian dan menjadikannya kelihatan lebih mudah.
    • fungsi panggil balik GCSE memastikan bahawa input dimuatkan sebelum menukar sifat input. Kaedah ini lebih dipercayai daripada menggunakan kaedah
  • . setTimeout
    • API Carian Google boleh digunakan untuk membuat kotak carian dan kotak hasil. Jika pertanyaan aktif wujud, kotak hasil juga dibuat. Penyesuaian lain boleh dicapai dengan melihat dokumen tersebut.
    • Fungsi gaya tersuai boleh ditambah ke Div Carian untuk penyesuaian selanjutnya. Fungsi ini boleh digunakan untuk menukar ruang letak, memadam latar belakang, dan menambah peristiwa yang membuang latar belakang apabila tidak fokus.
Artikel ini dikaji semula oleh Mark Brown. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Pemilik laman web sering memilih untuk menggunakan Google Custom Search Engine (GCSE) untuk mencari kandungan mereka dan bukannya menggunakan ciri carian terbina dalam dan/atau tersuai. Alasannya adalah mudah - lebih kurang kerja dan dalam kebanyakan kes ia dapat mencapai tujuan. Jika anda tidak memerlukan penapis lanjutan atau parameter carian tersuai, GCSE adalah untuk anda.

Dalam hujung cepat ini, saya akan menunjukkan kepada anda bagaimana untuk membuat borang carian secara manual (tidak perlu menggunakan tag GCSE khas) dan kotak hasil, yang membolehkan kawalan yang lebih baik dan kaedah penetapan gaya medan input carian yang bersih.

Soalan

Biasanya, menambahkan GCSE ke laman web anda semudah skrip salinan dan tag HTML tersuai ke laman web anda. Di mana anda meletakkan tag GCSE khas, medan carian input akan diberikan. Taipkan dan mula carian dari medan ini akan melakukan carian Google berdasarkan parameter yang dikonfigurasikan sebelumnya (contohnya, cari hanya sitepoint.com).

Soalan umum ialah "Bagaimana Mengubah Pemegang Sedang untuk Medan Input GCSE?". Malangnya, jawapan yang dicadangkan biasanya salah, kerana ia menggunakan kaedah

yang tidak boleh dipercayai untuk menunggu panggilan Ajax GCSE untuk disiapkan (pastikan input dilampirkan ke DOM), dan kemudian ubah sifat melalui JavaScript.

Kami juga akan menanyakan elemen dan menukar atribut menggunakan JS, tetapi kami akan menggunakan fungsi panggil balik yang disediakan oleh GCSE dan bukannya menggunakan secara membabi buta setTimeout, yang akan memastikan bahawa input dimuatkan.

setTimeout() Buat akaun GCSE

Enjin carian dikonfigurasi sepenuhnya dalam talian. Langkah pertama ialah pergi ke laman web GCSE dan klik Tambah. Ikuti wizard untuk mengisi nama domain yang ingin anda cari (biasanya URL laman web anda). Sekarang anda boleh mengabaikan sebarang tetapan lanjutan.

Selepas mengklik "Selesai", anda akan melihat tiga pilihan:

  1. "Dapatkan Kod", yang akan membimbing anda melalui apa yang anda perlu salin dan di mana untuk meletakkannya supaya carian akan muncul di laman web anda
  2. "URL awam" akan menunjukkan kepada anda pratonton kerja carian set
  3. "Panel Kawalan" digunakan untuk menyesuaikan carian

pergi ke panel kawalan, klik ID enjin carian, dan perhatikan nilai ini untuk kegunaan kemudian.

Tetapan html

Untuk mencubanya, kami akan membuat index.html asas dengan HTML yang diperlukan, serta fail app.js yang mengandungi fungsi yang diperlukan untuk rendering dan carian tersuai.

terus membuat fail HTML asas dengan: 

<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <title>GCSE test</title>



    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    


</code>

kami menambah dua <div> dan menggunakan kelas khas untuk mengenal pasti unsur -unsur di mana bentuk carian dan hasil harus dibentangkan. <p> <strong> fungsi rendering manual </strong> </p> <p> Sekarang masukkan fail app.js anda dan tambahkan yang berikut: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;var config = { gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址 searchWrapperClass: 'gcse-search-wrapper', resultsWrapperClass: 'gcse-results-wrapper' }; var renderSearchForms = function () { if (document.readyState == 'complete') { queryAndRender(); } else { google.setOnLoadCallback(function () { queryAndRender(); }, true); } }; var queryAndRender = function() { var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass); var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass); if (gsceSearchForms.length &gt; 0) { renderSearch(gsceSearchForms[0]); } if (gsceResults.length &gt; 0) { renderResults(gsceResults[0]); } }; var renderSearch = function (div) { google.search.cse.element.render( { div: div.id, tag: 'searchbox-only', attributes: { resultsUrl: config.resultsUrl } } ); if (div.dataset &amp;&amp; div.dataset.stylingFunction &amp;&amp; window[div.dataset.stylingFunction] &amp;&amp; typeof window[div.dataset.stylingFunction] === 'function') { window[div.dataset.stylingFunction](div); // 传递div而不是form } }; var renderResults = function(div) { google.search.cse.element.render( { div: div.id, tag: 'searchresults-only' }); }; window.__gcse = { parsetags: 'explicit', callback: renderSearchForms }; (function () { var cx = config.gcseId; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); &lt;/code&gt;</pre> <p> Pertama, kami mengisytiharkan beberapa pembolehubah untuk konfigurasi. Letakkan ID yang anda tulis sebelum ini ke dalam medan konfigurasi. Letakkan URL fail index.html tempatan ke dalam medan <code>gcseId. Di sinilah carian akan diarahkan semula selepas pengguna mengemukakan pertanyaan. Di samping itu, GCSE akan mengharapkan untuk menjadikan medan hasil pada URL yang disediakan. resultsUrl

Pemeriksaan fungsi Jika halaman dimuatkan, dan jika ia dimuatkan, fungsi panggil balik akan bertanggungjawab untuk memberikan renderSearchForms; Kemudian selepas dokumen dimuatkan. queryAndRender()

Pertanyaan fungsi DOM dengan unsur -unsur kelas yang disediakan dalam konfigurasi. Jika Div Wrapper dijumpai, queryAndRender dan renderSearch() dipanggil masing -masing untuk menjadikan medan carian dan hasil. renderResults() Fungsi

adalah di mana sihir sebenar berlaku. renderSearch

Kami menggunakan API Carian Google (lebih banyak dokumentasi di sini mengenai cara menggunakan objek

) untuk membuat kotak carian dan jika terdapat pertanyaan aktif (hasil) maka kotak hasil dibuat. google.search.cse.element Fungsi yang diberikan

menerima lebih banyak parameter daripada yang disediakan dalam contoh ini, jadi pastikan untuk menyemak dokumentasi jika penyesuaian selanjutnya diperlukan. Parameter

sebenarnya menerima ID div yang akan kami berikan, dan parameter div menunjukkan apa sebenarnya yang akan kami render ( hasil tag atau carian atau kedua -duanya atau kedua -duanya atau kedua -duanya atau kedua -duanya ). Di samping itu,

mendapati atribut data elemen pembalut, dan jika atribut

gaya renderSearch() diberikan, ia akan mencari nama fungsi dalam skop dan memohon kepada elemen . Ini adalah peluang kami untuk gaya elemen.

Dalam coretan kod ini, kami menetapkan pembolehubah panggil balik dalam skop global supaya GCSE boleh menggunakan pembolehubah ini secara dalaman dan melaksanakan fungsi panggil balik selepas pemuatan selesai. Ini menjadikan kaedah ini jauh lebih baik daripada menggunakan penyelesaian 
<code class="language-javascript">window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};</code>
untuk mengedit pemegang tempat (atau apa -apa lagi) dari medan input.

setTimeout()

Run Test

Setakat ini, kami telah memasukkan semua yang kami perlukan untuk menjadikan kotak carian dan hasilnya. Jika anda mempunyai Node.js yang dipasang, pergi ke folder di mana fail index.html dan app.js diletakkan dan jalankan arahan http-server. Secara lalai, ini akan memberikan kandungan dalam folder pada port 8080 pada localhost.

Quick Tip: How to Style Google Custom Search Manually

Fungsi gaya

Sekarang kita akan menambah fungsi gaya tersuai ke Div Carian. Return index.html dan tambahkan atribut

pada #searchForm div: styling-function 

<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <title>GCSE test</title>



    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    


</code>
Sekarang pergi ke app.js, di bahagian atas fail, di bawah pengisytiharan pembolehubah konfigurasi, tambahkan fungsi baru: 

<code class="language-javascript">var config = {
  gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
  resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
  searchWrapperClass: 'gcse-search-wrapper',
  resultsWrapperClass: 'gcse-results-wrapper'
};

var renderSearchForms = function () {
  if (document.readyState == 'complete') {
    queryAndRender();
  } else {
    google.setOnLoadCallback(function () {
      queryAndRender();
    }, true);
  }
};

var queryAndRender = function() {
  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);

  if (gsceSearchForms.length > 0) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults.length > 0) {
    renderResults(gsceResults[0]);
  }
};

var renderSearch = function (div) {
    google.search.cse.element.render(
      {
        div: div.id,
        tag: 'searchbox-only',
        attributes: {
          resultsUrl: config.resultsUrl
        }
      }
    );
    if (div.dataset &&
        div.dataset.stylingFunction &&
        window[div.dataset.stylingFunction] &&
        typeof window[div.dataset.stylingFunction] === 'function') {
      window[div.dataset.stylingFunction](div); // 传递div而不是form
    }
};

var renderResults = function(div) {
  google.search.cse.element.render(
    {
      div: div.id,
      tag: 'searchresults-only'
    });
};

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

(function () {
  var cx = config.gcseId;
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();
</code>
Sekarang cuba muatkan halaman ujian sekali lagi dan anda akan melihat pemegang tempat yang betul.

Quick Tip: How to Style Google Custom Search Manually

Kesimpulan

Enjin carian Google Custom sangat berkesan untuk persediaan cepat carian mudah, terutamanya apabila laman web hanya HTML statik. Dengan hanya sedikit kod JavaScript, anda boleh menyesuaikan borang carian dan halaman hasil untuk memberi pengguna pengalaman yang lebih lancar.

Adakah anda menggunakan GCSE, atau adakah anda menemui penyelesaian yang lebih baik? Sila komen di bawah!

Soalan Lazim Menetapkan Gaya Carian Custom Google

Bagaimana untuk menyesuaikan penampilan enjin carian tersuai Google?

Sesuaikan penampilan enjin carian Google tersuai yang melibatkan penggunaan CSS (cascading stylesheets). CSS adalah bahasa gaya yang menggambarkan penampilan dan pemformatan dokumen yang ditulis dalam HTML. Anda boleh menukar warna, fon, saiz, dan elemen lain enjin carian. Untuk melakukan ini, anda perlu mengakses API Kawalan Elemen Carian yang boleh diprogramkan, yang membolehkan anda menyesuaikan elemen carian. Anda kemudian boleh menambah CSS ke bahagian yang betul untuk menukar rupa enjin carian.

Bolehkah saya menambah carian khas Google ke laman web saya?

Ya, anda boleh menambah carian Google Custom ke laman web anda. Google menyediakan API JSON carian tersuai yang boleh anda gunakan untuk menghantar permintaan GET. API ini mengembalikan hasil carian dalam format JSON. Anda kemudian boleh menggunakan hasil ini untuk membuat enjin carian tersuai di laman web anda. Ini membolehkan pengguna anda mencari laman web anda atau laman web lain yang anda tentukan.

Bagaimana untuk melaksanakan kotak carian menggunakan carian custom Google?

Melaksanakan kotak carian dengan Carian Custom Google melibatkan mewujudkan ID enjin carian, yang boleh anda lakukan di laman web enjin carian yang boleh diprogramkan. Sebaik sahaja anda mempunyai ID, anda boleh menggunakan API Kawalan Elemen Carian Custom untuk membuat kotak carian. Anda kemudian boleh menyesuaikan kotak carian ini menggunakan CSS.

Apakah API Kawalan Elemen Carian yang boleh diprogramkan?

API Kawalan Elemen Carian yang boleh diprogramkan adalah satu set fungsi yang disediakan oleh Google yang membolehkan anda menyesuaikan enjin carian yang boleh diprogramkan. Ini termasuk membuat kotak carian, menyesuaikan rupa enjin carian, dan mengawal hasil carian.

bagaimana untuk mengawal hasil carian dalam carian tersuai Google?

Anda boleh menggunakan API Kawalan Elemen Carian yang boleh diprogramkan untuk mengawal hasil carian dalam carian tersuai Google. API ini menyediakan fungsi yang membolehkan anda menentukan laman web yang anda cari, bilangan hasil yang dikembalikan, dan urutan di mana hasilnya dipaparkan.

Bolehkah saya menggunakan carian custom Google untuk tujuan komersial?

Ya, anda boleh menggunakan carian khusus Google untuk tujuan komersil. Walau bagaimanapun, anda perlu memahami syarat perkhidmatan. Sebagai contoh, anda tidak boleh menggunakan enjin carian untuk memaparkan kandungan dewasa atau mempromosikan aktiviti haram.

bagaimana menukar warna hasil carian dalam carian tersuai Google?

Anda boleh menggunakan CSS untuk menukar warna hasil carian dalam carian tersuai Google. Anda perlu mengakses API Kawalan Elemen Carian yang boleh diprogramkan dan menambah CSS ke bahagian yang betul. Anda boleh menukar warna teks, latar belakang, dan elemen hasil carian yang lain.

Bolehkah saya menggunakan Google untuk carian tersuai pada peranti mudah alih saya?

Ya, anda boleh menyesuaikan carian menggunakan Google pada peranti mudah alih anda. Enjin carian yang boleh diprogramkan direka untuk menjadi responsif, yang bermaksud ia akan menyesuaikan agar sesuai dengan saiz skrin peranti yang dilihatnya. Anda juga boleh menggunakan CSS untuk menyesuaikan rupa enjin carian untuk menjadikannya lebih mesra mudah alih.

Bagaimana untuk menambah logo dalam enjin carian Google Custom saya?

Anda boleh menambah logo dalam enjin carian Google Custom saya menggunakan CSS. Anda perlu mengakses API Kawalan Elemen Carian yang boleh diprogramkan dan menambah CSS ke bahagian yang betul. Anda kemudian boleh menambah URL imej untuk dipaparkan sebagai logo anda.

Bolehkah saya menggunakan google untuk carian tersuai tanpa pengetahuan pengekodan?

Walaupun anda boleh menggunakan Google untuk menyesuaikan carian tanpa pengetahuan pengekodan, disarankan agar anda mempunyai pemahaman tertentu tentang HTML dan CSS untuk menyesuaikan sepenuhnya enjin carian anda. Walau bagaimanapun, Google menyediakan dokumentasi dan tutorial terperinci untuk memulakan anda.

Atas ialah kandungan terperinci Petua Pantas: Cara Menggayakan Carian Custom Google secara manual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript json css ajax html 回调函数 JS function 对象 作用域 事件 dom 样式表 http 搜索引擎
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pantas: Tunjukkan pop timbul modal selepas kelewatanArtikel seterusnya：Pantas: Tunjukkan pop timbul modal selepas kelewatan

Artikel berkaitan

Lihat lagi