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
หากคุณใช้เวอร์ชัน SaaS ที่มีอยู่ใน Swiftype.com ของ App Search คุณควรใช้เวอร์ชัน 7.5.x ของไคลเอ็นต์
ไคลเอนต์เข้ากันได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด
โปรดทราบว่าไลบรารีนี้ขึ้นอยู่กับ Fetch API
Internet Explorer ไม่รองรับสิ่งนี้ หากคุณต้องการความเข้ากันได้แบบย้อนหลังสำหรับ Internet Explorer คุณจะต้องเติม Fetch API ด้วย https://github.com/github/fetch
การใช้ไคลเอนต์นี้จะถือว่าคุณมีอินสแตนซ์ของ 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- ซึ่งเป็นแบบอ่านอย่างเดียว ข้อมูลเพิ่มเติมสามารถพบได้ในเอกสารประกอบ
เมื่อใช้เวอร์ชัน SaaS บน Swiftype.com ของ App Search คุณสามารถกำหนดค่าไคลเอ็นต์โดยใช้ hostIdentifier แทนพารามิเตอร์ endpointBase คุณสามารถดู hostIdentifier ได้ในเมนูข้อมูลรับรอง
var client = ElasticAppSearch . createClient ( {
hostIdentifier : "host-c5s2mj" ,
searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
engineName : "favorite-videos"
} ) ;| ตัวเลือก | ที่จำเป็น | คำอธิบาย |
|---|---|---|
| ตัวระบุโฮสต์ | เลขที่ | Host Identifier ของคุณควรขึ้นต้นด้วย host- จำเป็น เว้นแต่จะตั้งค่า endpointBase ไว้อย่างชัดเจน |
| ค้นหาคีย์ | เลขที่ | รหัสค้นหาสาธารณะ ของคุณ ควรเริ่มต้นด้วย search- -หมายเหตุ: สิ่งนี้ไม่จำเป็น ในทางเทคนิค แต่ควรจัดเตรียมไว้ในกรณี 99% มีกรณีเล็กๆ น้อยๆ สำหรับการไม่ระบุสิ่งนี้ ซึ่งส่วนใหญ่จะมีประโยชน์สำหรับการใช้งานการค้นหาแอปภายใน ซึ่งสามารถละเว้นได้เพื่อใช้ประโยชน์จากการตรวจสอบสิทธิ์ตามเซสชันของ App Search |
| ชื่อเครื่องยนต์ | ใช่ | |
| จุดสิ้นสุดฐาน | เลขที่ | แทนที่ฐานของตำแหน่งข้อมูล App Search API โดยสมบูรณ์ มีประโยชน์เมื่อทำการพร็อกซี 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 มันบ่งบอกว่าแง่มุมควรได้รับการพิจารณาว่าแยกจากกัน เมื่อส่งคืนจำนวนสำหรับแง่มุมที่แยกกัน จำนวนจะถูกส่งกลับเหมือนกับว่าไม่มีการใช้ตัวกรองในช่องนี้ แม้ว่าจะมีการใช้ตัวกรองก็ตาม |
| แยก FacetsAnalyticsTags | อาร์เรย์[สตริง] | ใช้ร่วมกับพารามิเตอร์ disjunctiveFacets ข้อความค้นหาจะถูกแท็กด้วย "Facet-Only" ในแดชบอร์ด Analytics เว้นแต่จะระบุไว้ที่นี่ |
การตอบสนอง
วิธีการค้นหาส่งคืนคำตอบที่อยู่ในประเภท 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 > ข้อมูลจำเพาะในโปรเจ็กต์นี้ใช้ node-replay เพื่อบันทึกการตอบสนอง
จากนั้นการตอบกลับจะถูกตรวจสอบกับสแน็ปช็อต 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 >เรียกใช้เซิร์ฟเวอร์ dev:
# This will serve files in the `dist` directory
npm run devไปที่ http://127.0.0.1:8080 และรันคำสั่ง JavaScript ผ่านเบราว์เซอร์ Dev Console
nvm use
npm run build
nvm use
npm run publish
App Search มีไคลเอ็นต์ Node.js บุคคลที่หนึ่งซึ่งรองรับการดำเนินการเขียน เช่น การทำดัชนี
หากมีบางอย่างไม่ทำงานตามที่คาดไว้ โปรดเปิดปัญหา
ทางออกที่ดีที่สุดของคุณคือการอ่านเอกสาร
คุณสามารถตรวจสอบฟอรัมสนทนาของชุมชน Elastic App Search ได้
เรายินดีต้อนรับผู้ร่วมโครงการ ก่อนที่คุณจะเริ่ม โปรดทราบสองสามข้อ...
Apache 2.0 © ยืดหยุ่น
ขอขอบคุณผู้มีส่วนร่วมทุกคน!
