app search javascript
v8.5.1
Um cliente JavaScript próprio para criar experiências de pesquisa excelentes e relevantes com o Elastic App Search.
A maneira mais fácil de instalar este cliente é simplesmente incluir a distribuição construída do jsDelivr CDN.
< script src =" https://cdn.jsdelivr.net/npm/@elastic/[email protected]/dist/elastic_app_search.umd.js " > </ script >Isso tornará o cliente disponível globalmente em:
window . ElasticAppSearch ; Este pacote também pode ser instalado com npm ou yarn .
npm install --save @elastic/app-search-javascript
O cliente poderia então ser incluído em seu projeto da seguinte forma:
// CommonJS
var ElasticAppSearch = require ( "@elastic/app-search-javascript" ) ;
// ES
import * as ElasticAppSearch from "@elastic/app-search-javascript" ; Este cliente é versionado e lançado junto com o App Search.
Para garantir a compatibilidade, use a versão mais recente desta biblioteca na versão principal da implementação correspondente do App Search.
Por exemplo, para App Search 7.3 , use 7.3 desta biblioteca ou superior, mas não 8.0 .
Se você estiver usando a versão SaaS disponível em swifttype.com do App Search, deverá usar a versão 7.5.x do cliente.
O cliente é compatível com todos os navegadores modernos.
Observe que esta biblioteca depende da API Fetch.
Isto não é suportado pelo Internet Explorer. Se precisar de compatibilidade com versões anteriores do Internet Explorer, você precisará preencher a API Fetch com algo como https://github.com/github/fetch.
O uso desse cliente pressupõe que você já tenha uma instância do Elastic App Search instalada e em execução.
O cliente é configurado usando os parâmetros searchKey , endpointBase e engineName .
var client = ElasticAppSearch . createClient ( {
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
endpointBase : "http://127.0.0.1:3002" ,
engineName : "favorite-videos"
} ) ; * Observe que você só deve usar uma chave de pesquisa pública dentro do código Javascript no navegador. Por padrão, sua conta deve ter uma chave prefixada com search- – que é somente leitura. Mais informações podem ser encontradas na documentação.
Ao usar a versão SaaS disponível em swiftype.com do App Search, você pode configurar o cliente usando seu hostIdentifier em vez do parâmetro endpointBase . O hostIdentifier pode ser encontrado no menu Credenciais.
var client = ElasticAppSearch . createClient ( {
hostIdentifier : "host-c5s2mj" ,
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
engineName : "favorite-videos"
} ) ;| Opção | Obrigatório | Descrição |
|---|---|---|
| identificador de host | Não | Seu identificador de host deve começar com host- . Obrigatório, a menos que configure explicitamente endpointBase |
| chave de pesquisa | Não | Sua chave de pesquisa pública . Deve começar com search- .NOTA: Isto não é tecnicamente obrigatório, mas em 99% dos casos deve ser fornecido. Há um pequeno caso extremo para não fornecer isso, principalmente útil para uso interno do App Search, onde isso pode ser omitido para aproveitar a autenticação baseada em sessão do App Search. |
| motorName | Sim | |
| endpointBase | Não | Substitui completamente a base do endpoint da API App Search. Útil ao fazer proxy da API App Search, desenvolver em um servidor local ou em uma implantação autogerenciada ou na nuvem. Ex. "http://localhost:3002" |
| cacheRespons | Não | Se as respostas da API devem ou não ser armazenadas em cache. Padrão: true . |
| cabeçalhos adicionais | Não | Um objeto com chaves e valores que serão convertidos em nomes e valores de cabeçalho em todas as solicitações de API |
Este cliente é uma interface fina para a API do Elastic App Search. Detalhes adicionais para solicitações e respostas podem ser encontrados na documentação.
Para o termo de consulta lion , uma chamada de pesquisa é construída da seguinte forma:
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 } ` ) ;
} ) ; Observe que options suportam todas as opções listadas aqui: https://swiftype.com/documentation/app-search/guides/search.
Além das opções suportadas acima, também oferecemos suporte aos seguintes campos:
| Nome | Tipo | Descrição |
|---|---|---|
| facetas disjuntivas | Matriz[String] | Uma matriz de nomes de campos. Cada campo listado aqui também deve ser fornecido como uma faceta no campo facet . Denota que uma faceta deve ser considerada disjuntiva. Ao retornar contagens para facetas disjuntivas, as contagens serão retornadas como se nenhum filtro fosse aplicado neste campo, mesmo que algum fosse aplicado. |
| disjuntivoFacetsAnalyticsTags | Matriz[String] | Usado em conjunto com o parâmetro disjunctiveFacets . As consultas serão marcadas com "Somente faceta" no Painel do Analytics, a menos que especificado aqui. |
Resposta
O método search retorna a resposta agrupada em um 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 } ` ) ;
} ) ; É possível executar várias consultas ao mesmo tempo usando o método multiSearch .
Para pesquisar o termo lion e tiger , uma chamada de pesquisa é construída da seguinte forma:
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 } ` ) ;
} ) ; Os cliques podem ser rastreados vinculando chamadas client.click a eventos de clique em links de resultados de pesquisa individuais.
O exemplo a seguir mostra como isso pode ser implementado de forma declarativa anotando links com atributos de classe e dados.
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 > As especificações neste projeto usam node-replay para capturar respostas.
As respostas são então verificadas em relação aos instantâneos do Jest.
Para capturar novas respostas e atualizar instantâneos, execute:
nvm use
REPLAY=record npm run test -u
Para executar testes:
nvm use
npm run test
Você provavelmente desejará instalar um gerenciador de versão de nó, como o nvm.
Dependemos da versão do nó definido em .nvmrc.
Para instalar e usar a versão correta do nó com nvm:
nvm install
Instale dependências:
nvm use
npm install Crie artefatos no diretório dist :
# This will create files in the `dist` directory
npm run build Adicione um arquivo index.html ao seu diretório dist
< html >
< head >
< script src =" elastic_app_search.umd.js " > </ script >
</ head >
< body >
</ body >
</ html >Execute o servidor de desenvolvimento:
# This will serve files in the `dist` directory
npm run devNavegue até http://127.0.0.1:8080 e execute comandos JavaScript por meio do Dev Console do navegador.
nvm use
npm run build
nvm use
npm run publish
O App Search tem um cliente Node.js primário que oferece suporte a operações de gravação, como indexação.
Se algo não estiver funcionando conforme o esperado, abra um problema.
Sua melhor aposta é ler a documentação.
Você pode conferir os fóruns de discussão da comunidade do Elastic App Search.
Congratulamo-nos com colaboradores do projeto. Antes de começar, algumas notas...
Apache 2.0 © Elástico
Obrigado a todos os colaboradores!
