swiftype search jquery

Plugin jQuery Elastic Site Search pihak pertama untuk pencarian situs web.

Isi

• Memulai
• Penggunaan
• Tutorial penyesuaian
• Pertanyaan Umum
• Menyumbang
• Lisensi

---

Memulai?

Persyaratan:

1. akun Penelusuran Situs. Daftar di swifttype.com.
2. Mesin Pencari Situs dengan beberapa data di dalamnya.

Sertakan yang berikut ini di header halaman web Anda:

• versi terbaru jQuery
• plugin jQuery Pencarian Swifttype
• (opsional) stylesheet Pencarian Swifttype

Secara keseluruhan akan terlihat seperti ini:

 < script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > </ script >
< script type =" text/javascript " src =" jquery.swiftype.search.js " > </ script >
< link type =" text/css " rel =" stylesheet " href =" search.css " media =" all " />

Catatan: Klien ini telah dikembangkan hanya untuk titik akhir Elastic Site Search API. Anda dapat merujuk ke Dokumentasi API Elastic Site Search untuk konteks tambahan.

Penggunaan

Mulailah dengan memiliki setidaknya tiga elemen berikut pada halaman: formulir, kolom masukan dalam formulir, dan wadah untuk hasil.

 < form >
  < input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div >

Terapkan metode swifttype ke kolom input pencarian yang ada dalam formulir di halaman web Anda dan sediakan wadah untuk hasilnya. Misalnya, tambahkan ke kolom input pencarian dengan id st-search-input sebagai berikut:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  resultContainingElement : '#st-results-container' ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Pastikan untuk mengubah atribut engineKey yang ditunjukkan di atas agar sesuai dengan yang ditetapkan ke mesin pencari Swiftype Anda. Jika Anda menggunakan antarmuka web, kunci mesin pencari tercantum di halaman pertama dasbor Anda.

Tutorial penyesuaian

Plugin ini ditulis agar fleksibel berdasarkan kasus penggunaan spesifik Anda. Misalnya, Anda mungkin ingin mengambil lebih banyak data untuk setiap hasil, menyesuaikan cara data ditampilkan kepada pengguna, atau membatasi kueri penelusuran hanya pada elemen tertentu di mesin telusur Anda.

Mari kita lihat contoh yang melakukan semua ini. Untuk contoh ini, anggaplah Anda mengikuti tutorial QuickStart untuk Permata Ruby kami, dan sekarang Anda memiliki data untuk Toko Buku yang diindeks di mesin pencari contoh Anda.

Mengubah jumlah hasil per halaman

Untuk menentukan jumlah hasil per halaman, gunakan atribut perPage .

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
  perPage : 20
} ) ;

Nilai maksimum yang akan dipenuhi oleh API adalah 100.

Mengembalikan cuplikan sorotan yang cocok

Bidang apa pun yang ditanyakan selama pencarian akan menghasilkan hasil yang paling cocok (jika ada) di properti sorotan hasil. Semua cuplikan dalam formulir ini memiliki entitas HTML dari teks asli yang dikodekan. Penyorotan sebenarnya ditentukan menggunakan tag <em> (tidak dikodekan).

Anda dapat menyesuaikan bidang mana yang dikembalikan dalam properti highlight dengan menggunakan opsi highlightFields :

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
  highlightFields : { 'books' : { 'body' : { 'size' : 300 , 'fallback' : true } } }
} ) ;

Opsi highlightFields menerima hash yang berisi bidang yang ingin Anda soroti untuk setiap objek dari setiap jenis dokumen. Untuk setiap bidang, tentukan size sebagai jumlah karakter maksimum yang akan disertakan dalam cuplikan. Setel fallback ke true untuk memaksa penyertaan cuplikan yang tidak disorot jika sorotan tidak tersedia untuk bidang tersebut.

Lihat file custom.html untuk contoh tambahan highlightFields .

Hanya mengambil bidang yang Anda tentukan

Untuk menentukan bidang yang ingin Anda kembalikan dari API, atur atribut fetchFields ke hash yang berisi array yang mencantumkan bidang yang ingin Anda kembalikan untuk setiap jenis dokumen. Misalnya, jika Anda telah mengindeks bidang title , genre , published_on untuk setiap dokumen, Anda dapat mengembalikannya sebagai berikut:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Bidang tambahan ini akan dikembalikan bersama setiap item, dan dapat diakses dalam fungsi rendering seperti yang ditunjukkan di bagian berikutnya.

Menyesuaikan tampilan

Kini setelah Anda memiliki lebih banyak data untuk setiap item hasil, Anda dapat menyesuaikan fungsi rendering item untuk memanfaatkannya.

Fungsi rendering default ditunjukkan di bawah ini:

 var defaultRenderFunction = function ( document_type , item ) {
  return '<div class="st-result"><h3 class="title"><a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a></h3></div>' ;
} ;

Bidang tambahan tersedia sebagai kunci dalam kamus item, sehingga Anda dapat menyesuaikannya untuk menggunakan bidang genre sebagai berikut:

 var customRenderFunction = function ( document_type , item ) {
  var out = '<a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a>' ;
  return out . concat ( '<p class="genre">' + item [ 'genre' ] + '</p>' ) ;
} ;

Sekarang cukup setel atribut renderFunction di kamus opsi ke customRenderFunction Anda untuk memberi tahu plugin kami agar menggunakan fungsi Anda untuk merender hasil:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Membatasi pencocokan pada bidang tertentu

Secara default, perpustakaan pencarian Swifttype akan mencocokkan kueri yang dikirimkan dengan string atau bidang text apa pun yang diindeks untuk dokumen Anda. Jadi jika Anda ingin memastikan bahwa itu hanya cocok dengan entri di bidang title , misalnya, Anda dapat menentukan opsi searchFields :

 $('#st-search-input').swiftypeSearch({
  renderFunction: customRenderFunction,
  fetchFields: {'books': ['title','genre','published_on']},
  searchFields: {'books': ['title']},
  engineKey: 'jaDGyzkR6iYHkfNsPpNK'
});

Mirip dengan opsi fetchFields , searchFields menerima hash yang berisi array bidang untuk setiap tipe_dokumen yang ingin dicocokkan dengan kueri pengguna.

Menentukan kondisi kueri tambahan

Sekarang katakanlah Anda hanya ingin hasil Anda menampilkan buku genre fiksi dan tersedia dalam stok . Untuk membatasi hasil pencarian, Anda dapat meneruskan kondisi kueri tambahan ke API pencarian dengan menentukannya sebagai kamus di bidang filters . Beberapa klausa di bidang filter digabungkan dengan logika AND:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
  searchFields : { 'books' : [ 'title' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Memicu kueri baru

Dalam kasus tertentu, Anda mungkin perlu memicu pencarian baru secara manual. Metode berikut dapat digunakan untuk melakukannya. Contoh kasus seperti ini adalah jika pengguna memilih untuk menerapkan filter dan kueri baru perlu dieksekusi.

 Swiftype.reloadResults();

Pertanyaan Umum?

Bisakah saya menggunakan ini dengan Plugin Swifttype Autocomplete?

Ya! Jika Anda mencari fungsionalitas pelengkapan otomatis, periksa Plugin Swifttype Autocomplete.

Di mana saya melaporkan masalah dengan klien?

Jika ada sesuatu yang tidak berfungsi seperti yang diharapkan, silakan buka masalah.

Di mana saya dapat mempelajari lebih lanjut tentang Penelusuran Situs?

Taruhan terbaik Anda adalah membaca dokumentasinya.

Ke mana lagi saya bisa mendapatkan bantuan?

Anda dapat memeriksa forum diskusi komunitas Elastic Site Search.

Menyumbang

Kami menyambut kontributor untuk proyek ini. Sebelum Anda mulai, beberapa catatan...

• Sebelum membuka pull request, harap buat isu untuk mendiskusikan ruang lingkup proposal Anda.
• Harap tulis kode sederhana dan dokumentasi ringkas, bila perlu.

Lisensi?

MIT © Elastis

Terima kasih kepada semua kontributor!