app search javascript
v8.5.1
Un cliente JavaScript propio para crear experiencias de búsqueda excelentes y relevantes con Elastic App Search.
La forma más sencilla de instalar este cliente es simplemente incluir la distribución integrada desde la CDN jsDelivr.
< script src =" https://cdn.jsdelivr.net/npm/@elastic/[email protected]/dist/elastic_app_search.umd.js " > </ script >Esto hará que el cliente esté disponible globalmente en:
window . ElasticAppSearch ; Este paquete también se puede instalar con npm o yarn .
npm install --save @elastic/app-search-javascript
Luego, el cliente podría incluirse en su proyecto de la siguiente manera:
// CommonJS
var ElasticAppSearch = require ( "@elastic/app-search-javascript" ) ;
// ES
import * as ElasticAppSearch from "@elastic/app-search-javascript" ; Este cliente tiene una versión y se lanza junto con App Search.
Para garantizar la compatibilidad, utilice la versión más reciente de esta biblioteca dentro de la versión principal de la implementación de App Search correspondiente.
Por ejemplo, para App Search 7.3 , use 7.3 de esta biblioteca o superior, pero no 8.0 .
Si está utilizando la versión SaaS disponible en swiftype.com de App Search, debe utilizar la versión 7.5.x del cliente.
El cliente es compatible con todos los navegadores modernos.
Tenga en cuenta que esta biblioteca depende de la API Fetch.
Esto no es compatible con Internet Explorer. Si necesita compatibilidad con versiones anteriores de Internet Explorer, deberá completar la API Fetch con algo como https://github.com/github/fetch.
El uso de este cliente supone que ya tiene una instancia de Elastic App Search en funcionamiento.
El cliente se configura mediante los parámetros searchKey , endpointBase y engineName .
var client = ElasticAppSearch . createClient ( {
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
endpointBase : "http://127.0.0.1:3002" ,
engineName : "favorite-videos"
} ) ; * Tenga en cuenta que sólo debe utilizar una clave de búsqueda pública dentro del código Javascript del navegador. De forma predeterminada, su cuenta debe tener una clave con el prefijo search- que es de solo lectura. Puede encontrar más información en la documentación.
Cuando utilice la versión SaaS disponible en swiftype.com de App Search, puede configurar el cliente utilizando su hostIdentifier en lugar del parámetro endpointBase . El hostIdentifier se puede encontrar en el menú Credenciales.
var client = ElasticAppSearch . createClient ( {
hostIdentifier : "host-c5s2mj" ,
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
engineName : "favorite-videos"
} ) ;| Opción | Requerido | Descripción |
|---|---|---|
| identificador de host | No | Su identificador de host debe comenzar con host- . Requerido a menos que se establezca explícitamente endpointBase |
| clave de búsqueda | No | Su clave de búsqueda pública . Debería comenzar con search- .NOTA: Esto no es técnicamente necesario, pero en el 99% de los casos debería proporcionarse. Existe un pequeño caso límite para no proporcionar esto, principalmente útil para el uso interno de App Search, donde se puede omitir para aprovechar la autenticación basada en sesiones de App Search. |
| nombre del motor | Sí | |
| punto finalBase | No | Anula por completo la base del punto final de la API de App Search. Útil cuando se utiliza proxy para la API de búsqueda de aplicaciones, se desarrolla en un servidor local o en una implementación autoadministrada o en la nube. Ex. "http://localhost:3002" |
| cachéRespuestas | No | Si las respuestas de la API deben almacenarse en caché o no. Valor predeterminado: true . |
| encabezados adicionales | No | Un objeto con claves y valores que se convertirá en nombres y valores de encabezado en todas las solicitudes de API. |
Este cliente es una interfaz delgada para la API de Elastic App Search. Se pueden encontrar detalles adicionales para solicitudes y respuestas en la documentación.
Para el término de consulta lion , se construye una llamada de búsqueda de la siguiente manera:
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 } ` ) ;
} ) ; Tenga en cuenta que options admiten todas las opciones enumeradas aquí: https://swiftype.com/documentation/app-search/guides/search.
Además de las opciones admitidas anteriormente, también admitimos los siguientes campos:
| Nombre | Tipo | Descripción |
|---|---|---|
| facetas disyuntivas | Matriz[Cadena] | Una serie de nombres de campos. Todos los campos enumerados aquí también deben proporcionarse como una faceta en el campo facet . Denota que una faceta debe considerarse disyuntiva. Al devolver recuentos para facetas disyuntivas, los recuentos se devolverán como si no se hubiera aplicado ningún filtro en este campo, incluso si se hubiera aplicado alguno. |
| disyuntivaFacetasAnalíticaEtiquetas | Matriz[Cadena] | Se utiliza junto con el parámetro disjunctiveFacets . Las consultas se etiquetarán con "Solo facetas" en el Panel de análisis, a menos que se especifique aquí. |
Respuesta
El método de búsqueda devuelve la respuesta envuelta en un tipo 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 } ` ) ;
} ) ; Es posible ejecutar varias consultas a la vez utilizando el método multiSearch .
Para buscar el término lion y tiger , se construye una llamada de búsqueda de la siguiente manera:
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 } ` ) ;
} ) ; Los clics se pueden rastrear vinculando llamadas client.click para hacer clic en eventos en enlaces de resultados de búsqueda individuales.
El siguiente ejemplo muestra cómo esto se puede implementar de forma declarativa anotando enlaces con atributos de clase y datos.
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 > Las especificaciones de este proyecto utilizan node-replay para capturar respuestas.
Luego, las respuestas se comparan con las instantáneas de Jest.
Para capturar nuevas respuestas y actualizar instantáneas, ejecute:
nvm use
REPLAY=record npm run test -u
Para ejecutar pruebas:
nvm use
npm run test
Probablemente quieras instalar un administrador de versiones de nodos, como nvm.
Dependemos de la versión del nodo definido en .nvmrc.
Para instalar y utilizar la versión de nodo correcta con nvm:
nvm install
Instalar dependencias:
nvm use
npm install Cree artefactos en el directorio dist :
# This will create files in the `dist` directory
npm run build Agregue un archivo index.html a su directorio dist
< html >
< head >
< script src =" elastic_app_search.umd.js " > </ script >
</ head >
< body >
</ body >
</ html >Ejecute el servidor de desarrollo:
# This will serve files in the `dist` directory
npm run devNavegue a http://127.0.0.1:8080 y ejecute comandos JavaScript a través de la consola de desarrollo del navegador.
nvm use
npm run build
nvm use
npm run publish
App Search tiene un cliente Node.js propio que admite operaciones de escritura como la indexación.
Si algo no funciona como se esperaba, abra un problema.
Lo mejor que puede hacer es leer la documentación.
Puede consultar los foros de discusión de la comunidad Elastic App Search.
Damos la bienvenida a los contribuyentes al proyecto. Antes de comenzar, un par de notas...
Apache 2.0 © elástico
¡Gracias a todos los contribuyentes!
