app search javascript
v8.5.1
Elastic App Search를 통해 우수하고 관련성 높은 검색 경험을 구축하기 위한 자사 JavaScript 클라이언트입니다.
이 클라이언트를 설치하는 가장 쉬운 방법은 jsDelivr CDN에서 빌드된 배포판을 포함시키는 것입니다.
< script src =" https://cdn.jsdelivr.net/npm/@elastic/[email protected]/dist/elastic_app_search.umd.js " > </ script >이렇게 하면 클라이언트를 다음 위치에서 전 세계적으로 사용할 수 있게 됩니다.
window . ElasticAppSearch ; 이 패키지는 npm 또는 yarn 사용하여 설치할 수도 있습니다.
npm install --save @elastic/app-search-javascript
그런 다음 클라이언트를 다음과 같이 프로젝트에 포함할 수 있습니다.
// CommonJS
var ElasticAppSearch = require ( "@elastic/app-search-javascript" ) ;
// ES
import * as ElasticAppSearch from "@elastic/app-search-javascript" ; 이 클라이언트는 App Search와 함께 버전이 지정되고 출시됩니다.
호환성을 보장하려면 해당 App Search 구현의 주요 버전 내에서 이 라이브러리의 최신 버전을 사용하세요.
예를 들어 App Search 7.3 의 경우 이 라이브러리의 7.3 이상을 사용하고 8.0 은 사용하지 마세요.
App Search의 Swiftype.com에서 제공되는 SaaS 버전을 사용하는 경우 클라이언트 버전 7.5.x를 사용해야 합니다.
클라이언트는 모든 최신 브라우저와 호환됩니다.
이 라이브러리는 Fetch API에 의존합니다.
Internet Explorer에서는 지원되지 않습니다. Internet Explorer에 대한 이전 버전과의 호환성이 필요한 경우 https://github.com/github/fetch와 같은 항목으로 Fetch API를 폴리필해야 합니다.
이 클라이언트를 사용하는 것은 Elastic App Search 인스턴스가 이미 실행 중이라고 가정합니다.
클라이언트는 searchKey , endpointBase 및 engineName 매개변수를 사용하여 구성됩니다.
var client = ElasticAppSearch . createClient ( {
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
endpointBase : "http://127.0.0.1:3002" ,
engineName : "favorite-videos"
} ) ; * 공개 검색 키는 브라우저의 자바스크립트 코드 내에서만 사용해야 합니다. 기본적으로 계정에는 search- 라는 접두어가 붙은 읽기 전용 키가 있어야 합니다. 자세한 내용은 설명서에서 확인할 수 있습니다.
App Search의 Swiftype.com에서 제공되는 SaaS 버전을 사용하는 경우 endpointBase 매개변수 대신 hostIdentifier 사용하여 클라이언트를 구성할 수 있습니다. hostIdentifier 자격 증명 메뉴에서 찾을 수 있습니다.
var client = ElasticAppSearch . createClient ( {
hostIdentifier : "host-c5s2mj" ,
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
engineName : "favorite-videos"
} ) ;| 옵션 | 필수의 | 설명 |
|---|---|---|
| 호스트 식별자 | 아니요 | 호스트 식별자 는 host- 로 시작해야 합니다. endpointBase 명시적으로 설정하지 않는 한 필수 |
| 검색키 | 아니요 | 공개 검색 키 . search- 로 시작해야 합니다.참고: 이는 기술적으로 필수는 아니지만 99%의 경우 제공되어야 합니다. 이를 제공하지 않는 작은 경우가 있는데, 주로 내부 App Search 사용에 유용하며, App Search의 세션 기반 인증을 활용하기 위해 이를 생략할 수 있습니다. |
| 엔진 이름 | 예 | |
| 엔드포인트베이스 | 아니요 | App Search API 엔드포인트의 기본을 완전히 재정의합니다. App Search API 프록시, 로컬 서버 개발, 자체 관리형 또는 클라우드 배포 시 유용합니다. 전. "http://localhost:3002" |
| 캐시응답 | 아니요 | API 응답을 캐시해야 하는지 여부입니다. 기본값: true . |
| 추가헤더 | 아니요 | 모든 API 요청의 헤더 이름과 값으로 변환될 키와 값이 있는 객체 |
이 클라이언트는 Elastic App Search API에 대한 씬 인터페이스입니다. 요청 및 응답에 대한 추가 세부정보는 설명서에서 확인할 수 있습니다.
검색어 lion 의 경우 검색 호출은 다음과 같이 구성됩니다.
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 } ` ) ;
} ) ; options https://swiftype.com/documentation/app-search/guides/search에 나열된 모든 옵션을 지원합니다.
위에서 지원되는 옵션 외에도 다음 필드도 지원됩니다.
| 이름 | 유형 | 설명 |
|---|---|---|
| 분리형 패싯 | 배열[문자열] | 필드 이름의 배열입니다. 여기에 나열된 모든 필드는 facet 필드에 패싯으로 제공되어야 합니다. 이는 패싯이 분리된 것으로 간주되어야 함을 나타냅니다. 분리형 패싯에 대한 개수를 반환할 때 필터가 적용된 경우에도 이 필드에 필터가 적용되지 않은 것처럼 개수가 반환됩니다. |
| disjunctiveFacetsAnalytics태그 | 배열[문자열] | disjunctiveFacets 매개변수와 함께 사용됩니다. 여기에 지정하지 않는 한 쿼리에는 Analytics 대시보드에서 "Facet-Only"라는 태그가 지정됩니다. |
응답
검색 메소드는 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 } ` ) ;
} ) ; multiSearch 메소드를 사용하면 한 번에 여러 쿼리를 실행할 수 있습니다.
lion and tiger 라는 용어를 검색하기 위해 검색 호출은 다음과 같이 구성됩니다.
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 } ` ) ;
} ) ; 개별 검색 결과 링크의 클릭 이벤트에 client.click 호출을 바인딩하여 클릭률을 추적할 수 있습니다.
다음 예에서는 클래스 및 데이터 속성으로 링크에 주석을 달아 이를 선언적으로 구현하는 방법을 보여줍니다.
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 > 이 프로젝트의 사양은 노드 재생을 사용하여 응답을 캡처합니다.
그런 다음 Jest 스냅샷과 비교하여 응답을 확인합니다.
새로운 응답을 캡처하고 스냅샷을 업데이트하려면 다음을 실행하세요.
nvm use
REPLAY=record npm run test -u
테스트를 실행하려면 다음 안내를 따르세요.
nvm use
npm run test
nvm과 같은 노드 버전 관리자를 설치하고 싶을 수도 있습니다.
우리는 .nvmrc에 정의된 노드 버전에 의존합니다.
nvm을 사용하여 올바른 노드 버전을 설치하고 사용하려면 다음 안내를 따르세요.
nvm install
종속성을 설치합니다.
nvm use
npm install dist 디렉터리에 아티팩트를 빌드합니다.
# This will create files in the `dist` directory
npm run build dist 디렉터리에 index.html 파일을 추가하세요.
< html >
< head >
< script src =" elastic_app_search.umd.js " > </ script >
</ head >
< body >
</ body >
</ html >개발 서버를 실행합니다:
# This will serve files in the `dist` directory
npm run devhttp://127.0.0.1:8080으로 이동하여 브라우저 개발자 콘솔을 통해 JavaScript 명령을 실행합니다.
nvm use
npm run build
nvm use
npm run publish
App Search에는 인덱싱과 같은 쓰기 작업을 지원하는 자사 Node.js 클라이언트가 있습니다.
예상대로 작동하지 않는 경우 문제를 열어주세요.
가장 좋은 방법은 설명서를 읽는 것입니다.
Elastic App Search 커뮤니티 토론 포럼을 확인해 보세요.
우리는 프로젝트에 참여하는 분들을 환영합니다. 시작하기 전에 몇 가지 참고 사항이 있습니다.
아파치 2.0 © 탄력적
모든 기여자에게 감사드립니다!
