app search javascript
v8.5.1
Un client JavaScript propriétaire permettant de créer d'excellentes expériences de recherche pertinentes avec Elastic App Search.
Le moyen le plus simple d'installer ce client consiste simplement à inclure la distribution construite à partir du CDN jsDelivr.
< script src =" https://cdn.jsdelivr.net/npm/@elastic/[email protected]/dist/elastic_app_search.umd.js " > </ script >Cela rendra le client disponible dans le monde entier à :
window . ElasticAppSearch ; Ce package peut également être installé avec npm ou yarn .
npm install --save @elastic/app-search-javascript
Le client pourrait alors être inclus dans votre projet comme suit :
// CommonJS
var ElasticAppSearch = require ( "@elastic/app-search-javascript" ) ;
// ES
import * as ElasticAppSearch from "@elastic/app-search-javascript" ; Ce client est versionné et publié avec App Search.
Pour garantir la compatibilité, utilisez la version la plus récente de cette bibliothèque dans la version majeure de l'implémentation App Search correspondante.
Par exemple, pour App Search 7.3 , utilisez 7.3 de cette bibliothèque ou une version ultérieure, mais pas 8.0 .
Si vous utilisez la version SaaS disponible sur swiftype.com d'App Search, vous devez utiliser la version 7.5.x du client.
Le client est compatible avec tous les navigateurs modernes.
Notez que cette bibliothèque dépend de l'API Fetch.
Ceci n'est pas pris en charge par Internet Explorer. Si vous avez besoin d'une compatibilité ascendante pour Internet Explorer, vous devrez remplir l'API Fetch avec quelque chose comme https://github.com/github/fetch.
L'utilisation de ce client suppose que vous disposez déjà d'une instance d'Elastic App Search opérationnelle.
Le client est configuré à l'aide des paramètres searchKey , endpointBase et engineName .
var client = ElasticAppSearch . createClient ( {
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
endpointBase : "http://127.0.0.1:3002" ,
engineName : "favorite-videos"
} ) ; * Veuillez noter que vous ne devez utiliser une clé de recherche publique que dans le code Javascript du navigateur. Par défaut, votre compte doit avoir une clé préfixée par search- , en lecture seule. Plus d’informations peuvent être trouvées dans la documentation.
Lorsque vous utilisez la version SaaS disponible sur Swiftype.com d'App Search, vous pouvez configurer le client à l'aide de votre hostIdentifier au lieu du paramètre endpointBase . L' hostIdentifier se trouve dans le menu Informations d'identification.
var client = ElasticAppSearch . createClient ( {
hostIdentifier : "host-c5s2mj" ,
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
engineName : "favorite-videos"
} ) ;| Option | Requis | Description |
|---|---|---|
| Identifiant d'hôte | Non | Votre identifiant d'hôte doit commencer par host- . Obligatoire sauf si vous définissez explicitement endpointBase |
| clé de recherche | Non | Votre clé de recherche publique . Cela devrait commencer par search- .REMARQUE : Ce n'est pas techniquement requis, mais dans 99 % des cas, cela devrait être fourni. Il existe un petit cas limite pour ne pas fournir cela, principalement utile pour l'utilisation interne d'App Search, où cela peut être omis afin de tirer parti de l'authentification basée sur la session d'App Search. |
| Nom du moteur | Oui | |
| point de terminaisonBase | Non | Remplace complètement la base du point de terminaison de l’API App Search. Utile lors du proxy de l'API App Search, du développement sur un serveur local ou d'un déploiement autogéré ou cloud. Ex. "http://localhost:3002" |
| cacheRéponses | Non | Indique si les réponses de l'API doivent être mises en cache ou non. Par défaut : true . |
| En-têtes supplémentaires | Non | Un objet avec des clés et des valeurs qui seront converties en noms et valeurs d'en-tête sur toutes les requêtes API |
Ce client est une interface légère pour l'API Elastic App Search. Des détails supplémentaires sur les demandes et les réponses peuvent être trouvés dans la documentation.
Pour le terme de requête lion , un appel de recherche est construit comme suit :
var options = {
search_fields : { title : { } } ,
result_fields : { id : { raw : { } } , title : { raw : { } } }
} ;
client
. search ( "lion" , options )
. then ( resultList => {
resultList . results . forEach ( result => {
console . log ( `id: ${ result . getRaw ( "id" ) } raw: ${ result . getRaw ( "title" ) } ` ) ;
} ) ;
} )
. catch ( error => {
console . log ( `error: ${ error } ` ) ;
} ) ; Notez que options prennent en charge toutes les options répertoriées ici : https://swiftype.com/documentation/app-search/guides/search.
En plus des options prises en charge ci-dessus, nous prenons également en charge les champs suivants :
| Nom | Taper | Description |
|---|---|---|
| disjonctiveFacets | Tableau[Chaîne] | Un tableau de noms de champs. Chaque champ répertorié ici doit également être fourni sous forme de facette dans le champ facet . Cela signifie qu’une facette doit être considérée comme disjonctive. Lors du renvoi des décomptes pour les facettes disjonctives, les décomptes seront renvoyés comme si aucun filtre n'était appliqué sur ce champ, même si un filtre était appliqué. |
| disjonctiveFacetsAnalyticsTags | Tableau[Chaîne] | Utilisé conjointement avec le paramètre disjunctiveFacets . Les requêtes seront étiquetées avec « Facet-Only » dans le tableau de bord Analytics, sauf indication contraire ici. |
Réponse
La méthode de recherche renvoie la réponse enveloppée dans un type ResultList :
ResultList {
rawResults : [ ] , // List of raw `results` from JSON response
rawInfo : { // Object wrapping the raw `meta` property from JSON response
meta : { }
} ,
results : [ ResultItem ] , // List of `results` wrapped in `ResultItem` type
info : { // Currently the same as `rawInfo`
meta : { }
}
}
ResultItem {
getRaw ( fieldName ) , // Returns the HTML-unsafe raw value for a field, if it exists
getSnippet ( fieldName ) // Returns the HTML-safe snippet value for a field, if it exists
} var options = {
size : 3 ,
types : {
documents : {
fields : [ "name" ]
}
}
} ;
client
. querySuggestion ( "cat" , options )
. then ( response => {
response . results . documents . forEach ( document => {
console . log ( document . suggestion ) ;
} ) ;
} )
. catch ( error => {
console . log ( `error: ${ error } ` ) ;
} ) ; Il est possible d'exécuter plusieurs requêtes à la fois en utilisant la méthode multiSearch .
Pour rechercher le terme lion et tiger , un appel de recherche est construit comme suit :
var options = {
search_fields : { name : { } } ,
result_fields : { id : { raw : { } } , title : { raw : { } } }
} ;
client
. multiSearch ( [ { query : "node" , options } , { query : "java" , options } ] )
. then ( allResults => {
allResults . forEach ( resultList => {
resultList . results . forEach ( result => {
console . log (
`id: ${ result . getRaw ( "id" ) } raw: ${ result . getRaw ( "title" ) } `
) ;
} ) ;
} ) ;
} )
. catch ( error => {
console . log ( `error: ${ error } ` ) ;
} ) ; client
. click ( {
query : "lion" ,
documentId : "1234567" ,
requestId : "8b55561954484f13d872728f849ffd22" ,
tags : [ "Animal" ]
} )
. catch ( error => {
console . log ( `error: ${ error } ` ) ;
} ) ; Les clics peuvent être suivis en liant les appels client.click aux événements de clic sur les liens de résultats de recherche individuels.
L'exemple suivant montre comment cela peut être implémenté de manière déclarative en annotant les liens avec des attributs de classe et de données.
document . addEventListener ( "click" , function ( e ) {
const el = e . target ;
if ( ! el . classList . contains ( "track-click" ) ) return ;
client . click ( {
query : el . getAttribute ( "data-query" ) ,
documentId : el . getAttribute ( "data-document-id" ) ,
requestId : el . getAttribute ( "data-request-id" ) ,
tags : [ el . getAttribute ( "data-tag" ) ]
} ) ;
} ) ; < a
href =" /items/1234567 "
class =" track-click "
data-request-id =" 8b55561954484f13d872728f849ffd22 "
data-document-id =" 1234567 "
data-query =" lion "
data-tag =" Animal "
>
Item 1
</ a > Les spécifications de ce projet utilisent la relecture de nœuds pour capturer les réponses.
Les réponses sont ensuite vérifiées par rapport aux instantanés Jest.
Pour capturer de nouvelles réponses et mettre à jour les instantanés, exécutez :
nvm use
REPLAY=record npm run test -u
Pour exécuter des tests :
nvm use
npm run test
Vous souhaiterez probablement installer un gestionnaire de versions de nœuds, comme nvm.
Nous dépendons de la version du nœud définie dans .nvmrc.
Pour installer et utiliser la version correcte du nœud avec nvm :
nvm install
Installer les dépendances :
nvm use
npm install Créez des artefacts dans le répertoire dist :
# This will create files in the `dist` directory
npm run build Ajoutez un fichier index.html à votre répertoire dist
< html >
< head >
< script src =" elastic_app_search.umd.js " > </ script >
</ head >
< body >
</ body >
</ html >Exécutez le serveur de développement :
# This will serve files in the `dist` directory
npm run devAccédez à http://127.0.0.1:8080 et exécutez les commandes JavaScript via la console de développement du navigateur.
nvm use
npm run build
nvm use
npm run publish
App Search dispose d'un client Node.js propriétaire qui prend en charge les opérations d'écriture telles que l'indexation.
Si quelque chose ne fonctionne pas comme prévu, veuillez ouvrir un problème.
Le mieux est de lire la documentation.
Vous pouvez consulter les forums de discussion de la communauté Elastic App Search.
Nous accueillons les contributeurs au projet. Avant de commencer, quelques notes...
Apache 2.0 © Élastique
Merci à tous les contributeurs !
