app search javascript
v8.5.1
第一方 JavaScript 用戶端，用於使用 Elastic App Search 建立出色的相關搜尋體驗。
安裝此用戶端的最簡單方法是簡單地包含來自 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 。
如果您使用的是 swiftype.com 上提供的 App Search 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"
} ) ; * 請注意，您只能在瀏覽器的 Javascript 程式碼中使用公共搜尋金鑰。預設情況下，您的帳戶應該有一個以search-為前綴的唯讀金鑰。更多資訊可以在文件中找到。
使用 App Search 的 swiftype.com 上提供的 SaaS 版本時，您可以使用hostIdentifier而不是endpointBase參數來設定客戶端。 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參數結合使用。除非此處指定，否則查詢將在分析儀表板中標記為「僅方面」。 |
回覆
search 方法傳回包裝在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和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將index.html檔案加入到您的dist目錄中
< html >
< head >
< script src =" elastic_app_search.umd.js " > </ script >
</ head >
< body >
</ body >
</ html >運行開發伺服器：
# This will serve files in the `dist` directory
npm run dev導覽至 http://127.0.0.1:8080 並透過瀏覽器開發控制台執行 JavaScript 指令。
nvm use
npm run build
nvm use
npm run publish
App Search 有一個第一方 Node.js 用戶端，支援索引等寫入操作。
如果某些內容未按預期工作，請提出問題。
最好的選擇是閱讀文件。
您可以查看 Elastic App Search 社群討論論壇。
我們歡迎對該專案的貢獻者。在開始之前，請注意以下幾點...
Apache 2.0 © 彈性
感謝所有貢獻者！
