Searchkit est une bibliothèque open source qui vous aide à créer une excellente expérience de recherche avec Elasticsearch . Fonctionne avec Javascript, React, Vue, Angular et plus encore.
Site Web | Démos | Documents | Discorde
Searchkit fournit une interface utilisateur de recherche pour Elasticsearch ou Opensearch. Avec Searchkit, vous pouvez utiliser des composants Instantsearch tels que Searchbox, des filtres de raffinement et des résultats (et bien d'autres !) pour créer une expérience de recherche.
Searchkit est idéal pour tous ceux qui souhaitent créer rapidement une expérience de recherche.
Searchkit simplifie l'interface utilisateur de recherche avec Elasticsearch :
Searchkit Bot vous aidera à mieux comprendre ce référentiel. Vous pouvez demander des exemples de code, un guide d'installation, une aide au débogage et bien plus encore.
Ou consultez notre documentation pour plus d’exemples.
Soit installer via npm ou fil
npm install searchkit @searchkit/api @searchkit/instantsearch-clientou via 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 nécessite Elasticsearch 7.0 ou supérieur ou Opensearch 2.4 ou supérieur.
Ci-dessous, nous utilisons Docker pour exécuter 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.2puis ajoutons un index et quelques données
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 compatible avec tous les frameworks Instantsearch. Vous trouverez ci-dessous un exemple utilisant 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 >
}suivez le guide de démarrage.
L'API Searchkit Node vous permet de transmettre par proxy des requêtes à Elasticsearch à partir du navigateur. Ceci est utile si vous souhaitez masquer Elasticsearch du navigateur ou si vous souhaitez ajouter des filtres d'autorisation utilisateur à la requête.
Searchkit dispose d'un générateur de requêtes prêt à l'emploi, mais vous pouvez également personnaliser la requête en transmettant une fonction getQuery à apiClient.
const results = await apiClient . handleRequest ( req . body , {
getQuery : ( query , search_attributes ) => {
return [
{
combined_fields : {
query ,
fields : search_attributes ,
} ,
} ,
] ;
} ,
} ) ;Searchkit prend en charge la recherche par requête KNN. Vous trouverez ci-dessous un exemple de recherche par requête 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
}
}
}
}
} ) ;Suivez le didacticiel de recherche sémantique.
Vous pouvez également remplacer l’intégralité de la requête avec des hooks de requête. Vous trouverez ci-dessous un exemple de hook de requête qui ajoute une requête de ré-évaluation à la première requête de recherche.
Vous pouvez l'appliquer sur beforeSearch et 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 )
]
} ,
}
} ) ;en savoir plus dans la documentation de l'API ici.
Les règles de requête vous permettent de personnaliser le comportement de l'expérience de recherche. Vous pouvez utiliser des règles de requête pour améliorer ou filtrer les résultats, ou pour modifier le classement des résultats, en fonction d'un ensemble de conditions.
Vous trouverez ci-dessous un exemple de règle de requête qui améliore les résultats pour les films avec Dan Aykroyd ou Charlie Sheen, et filtre les résultats pour afficher uniquement les films si la requête est le mot « 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"'
}
]
}pour en savoir plus, consultez la documentation sur les règles de requête.
Q : Dois-je exposer Elasticsearch sur l'Internet public ?
Searchkit transmet les requêtes à Elasticsearch.
Searchkit propose les deux options : soit effectuer la recherche directement à partir du navigateur, soit utiliser l'API Searchkit pour envoyer des requêtes par proxy à Elasticsearch. Directement depuis le navigateur, il offre une excellente expérience de développement et un prototypage. Une fois que vous êtes prêt à déployer, vous pouvez utiliser l'API Searchkit pour envoyer des requêtes par proxy à Elasticsearch.
Q : Dois-je utiliser React ?
Vous pouvez utiliser React, React Native, Vue, Angular. Vous n'avez même pas besoin d'utiliser un framework frontend, vous pouvez utiliser du Javascript et du HTML simples avec les widgets instantsearch.js.
Q : Quelle version d'Elasticsearch est prise en charge ?
Searchkit est compatible avec Elasticsearch 7.0 et supérieur + Opensearch 2.0 et supérieur.
Q : Prenez-vous en charge Android et iOS ?
Potentiellement. L'API Searchkit imite l'API Algolia, il devrait donc être possible d'utiliser le client Algolia Instantsearch avec l'API Searchkit avec quelques ajustements. Si cela vous intéresse, veuillez nous le faire savoir.
Q : Pourquoi devrais-je utiliser Searchkit au lieu d'Algolia ?
Elasticsearch présente de nombreux avantages par rapport à Algolia. Vous souhaiterez peut-être utiliser Elasticsearch comme alternative moins chère à Algolia, surtout si vous disposez d'un grand ensemble de données. Vous souhaiterez peut-être exécuter Elasticsearch sur votre propre infrastructure ou avoir un meilleur contrôle sur la pertinence des requêtes.
