Searchkit adalah perpustakaan sumber terbuka yang membantu Anda membangun pengalaman pencarian yang luar biasa dengan Elasticsearch . Bekerja dengan Javascript, React, Vue, Angular, dan banyak lagi.
Situs web | Demo | Dokumentasi | Perselisihan
Searchkit menyediakan UI Pencarian untuk Elasticsearch atau Opensearch. Dengan Searchkit, Anda dapat menggunakan komponen Pencarian Instan seperti Kotak Pencarian, filter penyempurnaan dan hasil (dan banyak lagi!) untuk membangun pengalaman pencarian.
Searchkit sangat bagus untuk siapa saja yang ingin membangun pengalaman pencarian dengan cepat.
Searchkit menyederhanakan UI Pencarian dengan Elasticsearch:
Searchkit Bot akan membantu Anda memahami repositori ini dengan lebih baik. Anda dapat meminta contoh kode, panduan instalasi, bantuan debugging dan banyak lagi.
Atau lihat dokumentasi kami untuk contoh lainnya.
Instal melalui npm atau benang
npm install searchkit @searchkit/api @searchkit/instantsearch-clientatau melalui CDN
< script src =" https://cdn.jsdelivr.net/npm/@searchkit/instantsearch-client@latest " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/instantsearch.js@4 " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/searchkit@latest " > </ script > Searchkit memerlukan Elasticsearch 7.0 atau lebih tinggi atau Opensearch 2.4 atau lebih tinggi.
Di bawah ini kami menggunakan Docker untuk menjalankan Elasticsearch.
docker pull docker.elastic.co/elasticsearch/elasticsearch:8.6.2
docker network create elastic
docker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e " discovery.type=single-node " -e " xpack.security.enabled=false " -e http.cors.enabled=true -e " http.cors.allow-origin='*' " -e http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -e http.cors.allow-credentials=true -e network.publish_host=localhost -e xpack.security.enabled=false docker.elastic.co/elasticsearch/elasticsearch:8.6.2lalu mari tambahkan indeks dan beberapa data
curl --location --request PUT ' http://localhost:9200/products '
--header ' Content-Type: application/json '
--data-raw ' {
"mappings": {
"properties": {
"name": {
"type": "text"
},
"description": {
"type": "text"
},
"price": {
"type": "integer"
},
"categories": {
"type": "text",
"fields": {
"keyword": {
"type": "keyword"
}
}
}
}
}
} '
curl --location --request POST ' http://localhost:9200/products/_doc '
--header ' Content-Type: application/json '
--data-raw ' {
"name": "Apple iPhone 12 Pro Max",
"description": "The iPhone 12 Pro Max is the most powerful iPhone ever. It has a 6.7-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro Max is available in 128GB, 256GB, and 512GB storage options.",
"categories": ["phones", "apple"],
"price": 800
} '
curl --location --request POST ' http://localhost:9200/products/_doc '
--header ' Content-Type: application/json '
--data-raw ' {
"name": "Apple iPhone 12 Pro",
"description": "The iPhone 12 Pro is the most powerful iPhone ever. It has a 6.1-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro is available in 128GB, 256GB, and 512GB storage options.",
"categories": ["phones", "apple"],
"price": 700
} ' Searchkit kompatibel dengan semua kerangka Instantsearch. Di bawah ini adalah contoh penggunaan react-instantsearch.
import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'
// import your InstantSearch components
import { InstantSearch , SearchBox , Hits , RefinementList , Pagination , RangeInput } from 'react-instantsearch' ;
const sk = new Searchkit ( {
connection : {
host : 'http://localhost:9200' ,
// with an apiKey
// https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-api-key
// apiKey: '##########'
// with a username/password
// https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-usernamepassword
//auth: {
// username: "elastic",
// password: "changeme"
//}
} ,
search_settings : {
search_attributes : [ { field : 'title' , weight : 3 } , 'actors' , 'plot' ] ,
result_attributes : [ 'title' , 'actors' , 'poster' , 'plot' ] ,
highlight_attributes : [ 'title' ] ,
facet_attributes : [
{ attribute : 'actors' , field : 'actors.keyword' , type : 'string' } ,
{ attribute : 'imdbrating' , type : 'numeric' , field : 'imdbrating' }
]
}
} )
const searchClient = Client ( sk ) ;
const App = ( ) => (
< InstantSearch
indexName = "imdb_movies"
searchClient = { searchClient }
>
< SearchBox / >
< div className = "left-panel" >
< RefinementList attribute = "actors" searchable = { true } limit = { 10 } / >
< RangeInput attribute = "imdbrating" / >
< / div >
< div className = "right-panel" >
< Hits / >
< Pagination / >
< / div >
< / InstantSearch >
}ikuti panduan Memulai.
Searchkit Node API memungkinkan Anda mem-proxy permintaan ke Elasticsearch dari browser. Ini berguna jika Anda ingin menyembunyikan Elasticsearch dari browser, atau jika Anda ingin menambahkan filter izin pengguna ke kueri.
Searchkit memiliki pembuat kueri yang siap pakai, tetapi Anda juga dapat menyesuaikan kueri dengan meneruskan fungsi getQuery ke apiClient.
const results = await apiClient . handleRequest ( req . body , {
getQuery : ( query , search_attributes ) => {
return [
{
combined_fields : {
query ,
fields : search_attributes ,
} ,
} ,
] ;
} ,
} ) ;Searchkit mendukung pencarian kueri KNN. Di bawah ini adalah contoh pencarian kueri KNN.
const results = await client . handleRequest ( req . body , {
getKnnQuery ( query , search_attributes , config ) {
return {
field : 'dense-vector-field' ,
k : 10 ,
num_candidates : 100 ,
// supported in latest version of Elasticsearch
query_vector_builder : {
text_embedding : {
model_id : 'cookie_model' ,
model_text : query
}
}
}
}
} ) ;Ikuti tutorial Pencarian Semantik.
Anda juga dapat mengganti seluruh kueri dengan kait permintaan. Di bawah ini adalah contoh hook permintaan yang menambahkan kueri skor ulang ke permintaan penelusuran pertama.
Anda dapat menerapkan ini di beforeSearch dan afterSearch .
const results = await client . handleRequest ( req . body , {
hooks : {
beforeSearch : ( searchRequests ) => {
const uiRequest = searchRequests [ 0 ]
return [
{
... uiRequest ,
body : {
... uiRequest . body ,
rescore : {
window_size : 100 ,
query : {
rescore_query : {
match : {
plot : {
query : uiRequest . body . query ,
operator : "and" ,
} ,
} ,
} ,
query_weight : 1 ,
rescore_query_weight : 10 ,
}
}
}
} ,
searchRequests . slice ( 1 , searchRequests . length )
]
} ,
}
} ) ;baca lebih lanjut di dokumen api di sini.
Aturan kueri memungkinkan Anda menyesuaikan perilaku pengalaman penelusuran. Anda dapat menggunakan aturan kueri untuk meningkatkan atau memfilter hasil, atau mengubah peringkat hasil, berdasarkan serangkaian kondisi.
Di bawah ini adalah contoh aturan kueri yang meningkatkan hasil untuk film yang menampilkan Dan Aykroyd atau Charlie Sheen, dan memfilter hasil agar hanya menampilkan film jika kuerinya adalah kata "film".
{
id : '1' ,
conditions : [
[
{
context : 'query' ,
value : 'movie' ,
match_type : 'exact'
}
]
] ,
actions : [
{
action : 'QueryBoost' ,
query : 'actors:"Dan Aykroyd" OR actors:"Charlie Sheen"' ,
weight : 2
} ,
{
action : 'QueryFilter' ,
query : 'type:"movie"'
}
]
}baca selengkapnya di dokumen Aturan Kueri.
T: Apakah saya perlu mengekspos Elasticsearch ke internet publik?
Permintaan proksi Searchkit ke Elasticsearch.
Searchkit menawarkan kedua opsi, baik melakukan pencarian langsung dari browser, atau menggunakan API Searchkit untuk memproksi permintaan ke Elasticsearch. Langsung dari browser menawarkan pengalaman pengembang & pembuatan prototipe yang luar biasa. Setelah Anda siap untuk menerapkan, Anda dapat menggunakan API Searchkit untuk memproksi permintaan ke Elasticsearch.
T: Apakah saya perlu menggunakan React?
Anda dapat menggunakan React, React Native, Vue, Angular. Anda bahkan tidak perlu menggunakan kerangka frontend, Anda dapat menggunakan Javascript dan HTML biasa dengan widget instantsearch.js.
T: Versi Elasticsearch manakah yang didukung?
Searchkit kompatibel dengan Elasticsearch 7.0 dan yang lebih baru + Opensearch 2.0 dan yang lebih baru.
T: Apakah Anda mendukung Android dan iOS?
Berpotensi. Searchkit API meniru Algolia API, sehingga klien Algolia Instantsearch dapat digunakan dengan Searchkit API dengan beberapa penyesuaian. Jika Anda tertarik dengan hal ini, harap beri tahu kami.
T: Mengapa saya menggunakan Searchkit dan bukan Algolia?
Elasticsearch memiliki banyak keunggulan dibandingkan Algolia. Anda mungkin ingin menggunakan Elasticsearch sebagai alternatif yang lebih murah dibandingkan Algolia, terutama jika Anda memiliki kumpulan data yang besar. Anda mungkin ingin menjalankan Elasticsearch pada infrastruktur Anda sendiri, atau memiliki kontrol lebih besar terhadap relevansi kueri.
