หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด


การค้นหาเชิงโต้ตอบ

ไลบรารีส่วนประกอบ UI สำหรับ Elasticsearch, OpenSearch, Solr, MongoDB: พร้อมใช้งานสำหรับ React และ Vue

อ่านวิธีสร้าง UI การค้นหาอีคอมเมิร์ซ

ก.) ด้วย React หรือ b.) ด้วย Vue

ลองใช้กล่องค้นหาหากคุณกำลังสร้าง UI การค้นหาสำหรับเฟรมเวิร์ก JS อื่นๆ, React Native หรือ Flutter


ตรวจสอบตลาด ReactiveSearch ที่ reactiveapps.io


แม่แบบเว็บดีไซเนอร์สำหรับสเก็ตช์ภาพ

เทมเพลตนักออกแบบ iOS และ Android สำหรับสเก็ตช์


สารบัญ

  1. การค้นหาเชิงโต้ตอบ: บทนำ
  2. คุณสมบัติ
  3. สนามเด็กเล่นส่วนประกอบ
  4. ตัวอย่างสด
  5. เปรียบเทียบกับโครงการอื่นๆ
  6. การติดตั้ง
  7. คู่มือเอกสาร
  8. มีส่วนร่วม
  9. โครงการอื่น ๆ ที่คุณอาจชอบ

1. ReactiveSearch: บทนำ

ReactiveSearch คือไลบรารีส่วนประกอบ UI สำหรับ React และ Vue ซึ่งออกแบบมาเพื่อทำงานกับระบบคลาวด์ ReactiveSearch มีองค์ประกอบ UI มากกว่า 20 องค์ประกอบซึ่งประกอบด้วยรายการ ช่วง UI การค้นหา การแสดงผลลัพธ์ คำตอบ AI แผนภูมิ และวิธีนำองค์ประกอบ UI ที่มีอยู่เข้าสู่ไลบรารี

ส่วนประกอบ UI สามารถใช้สำหรับการกรองหรือค้นหาดัชนี ตัวอย่างเช่น:

  • ส่วนประกอบเซ็นเซอร์ SingleList ใช้ตัวกรองการจับคู่แบบตรงทั้งหมดตามรายการที่เลือก
  • ส่วนประกอบ RangeSlider ใช้แบบสอบถามช่วงตัวเลขตามค่าที่เลือกจาก UI
  • ส่วนประกอบ SearchBox ใช้คำแนะนำและคำค้นหาตามคำค้นหาที่พิมพ์โดยผู้ใช้

สามารถใช้ส่วนประกอบ UI ร่วมกันได้ ( react prop ช่วยให้กำหนดค่านี้ได้ในระดับต่อองค์ประกอบ) และแสดงผลลัพธ์ที่ตรงกันผ่านส่วนประกอบ UI ที่แสดงผลลัพธ์

ReactiveSearch รองรับส่วนประกอบการแสดงผลในตัวต่อไปนี้สำหรับการแสดงผลลัพธ์ (หรือที่เรียกว่า Hit):

  1. ReactiveList - ReactiveList รองรับรูปแบบการแสดงรายการและการ์ด รวมถึงอนุญาตการเรนเดอร์แบบกำหนดเองทั้งในระดับรายการและส่วนประกอบ
  2. ReactiveMap - ReactiveMap เสนอทางเลือกของ Google Maps และ OpenStreetMaps สำหรับการแสดงผลแผนที่
  3. AIAnswer - AIAnswer นำเสนอการเรียกข้อมูล Augmented Generation (RAG) ผ่านเครื่องมือค้นหาและโมเดล OpenAI และ
  4. ReactiveChart - ขับเคลื่อนโดย Apache E-Charts โดย ReactiveChart มีแผนภูมิในตัว 5 ประเภท ได้แก่ แผนภูมิวงกลม แท่ง ฮิสโตแกรม เส้น กระจาย และแผนภูมิเพิ่มเติมในรูปแบบ Apache E-Charts ReactiveChart รองรับเฉพาะ React เท่านั้นในขณะนี้

2. คุณสมบัติ

ออกแบบ

  • การสร้างแบบสอบถามของส่วนประกอบ UI และความสามารถใน react ช่วยให้สามารถสร้าง UI ที่ซับซ้อนได้ โดยที่ส่วนประกอบ UI จำนวนหนึ่งสามารถอัปเดตเชิงโต้ตอบตามการโต้ตอบของผู้ใช้
  • ไลบรารีจัดการการเปลี่ยนแปลงของการโต้ตอบ UI เป็นการสืบค้นเจตนาในการค้นหา
  • มาพร้อมกับส่วนประกอบที่กำหนดขอบเขตและมีสไตล์พร้อมการสนับสนุนเสา className`` and innerClass`
  • สามารถกำหนดธีมผ่าน ThemeProvider ได้

ใช้งานง่าย

  • การติดตั้งขั้นตอนเดียวด้วย npm i @appbaseio/reactivesearch
  • ส่วนประกอบที่มีสไตล์และกำหนดขอบเขตที่สามารถขยายได้อย่างง่ายดาย
  • ดูแอปเริ่มต้นการค้นหาเชิงโต้ตอบ

- ReactiveSearch API: รักษาความปลอดภัยคำค้นหาของคุณ

เริ่มต้น ReactiveSearch v4 (รุ่นหลักในปัจจุบัน) ไลบรารีจะส่งเฉพาะจุดประสงค์ในการค้นหา ข้อกำหนดสำหรับสิ่งนี้อยู่ที่นี่ - ReactiveSearch API ref. ขึ้นอยู่กับตัวเลือกเครื่องมือค้นหาที่คุณกำหนดค่าในระบบคลาวด์ ReactiveSearch คำค้นหา DSL จะถูกสร้างขึ้นโดยระบบคลาวด์ ReactiveSearch วิธีการนี้ทั้งปลอดภัยกว่าและช่วยให้สามารถถ่ายโอนตรรกะทางธุรกิจการค้นหาบนฝั่งเซิร์ฟเวอร์ได้

หากคุณใช้ ReactiveSearch v3 (รุ่นหลักล่าสุด) การใช้ ReactiveSearch API ผ่านการสืบค้น DSL ของ ElasticSearch ถือเป็นคุณสมบัติแบบเลือกใช้ คุณต้องตั้งค่า enableAppbase prop ให้เป็น true ในส่วนประกอบ ReactiveBase ของคุณ สิ่งนี้จะถือว่าคุณกำลังใช้ appbase.io สำหรับแบ็กเอนด์ของคุณ

เราขอแนะนำให้ตรวจสอบแอป KitchenSink นี้ที่สาธิตการใช้ ReactiveSearch API สำหรับส่วนประกอบ ReactiveSearch ทั้งหมด

⬆ กลับไปด้านบน


3. สนามเด็กเล่นส่วนประกอบ

ลองฟังเรื่องราวเกี่ยวกับสนามเด็กเล่นแบบสดๆ ที่สนามเด็กเล่น มองหาส่วนปุ่มในส่วนสนามเด็กเล่นของเรื่องราวเพื่อปรับแต่งอุปกรณ์ประกอบฉากแต่ละชิ้นและดูเอฟเฟกต์


4. การสาธิตสด

ชุดการสาธิตสดที่ได้รับแรงบันดาลใจจากแอปในโลกแห่งความเป็นจริง สร้างขึ้นด้วย ReactiveSearch

เว็บ

  • demos/booksearch - แอปค้นหาหนังสือตามชุดข้อมูล goodbooks
  • BookSearch with Antd - การสาธิตที่แสดงการใช้ธีมและส่วนประกอบ UI ของการออกแบบ Ant ด้วย ReactiveSearch
  • การค้นหาภาพยนตร์อีคอมเมิร์ซ - การสาธิตที่แสดง UI การค้นหาภาพยนตร์อีคอมเมิร์ซ
  • การค้นหาแดชบอร์ดและแผนภูมิ - การสาธิตพร้อมการตรวจสอบสิทธิ์ผู้ใช้: UI การเข้าสู่ระบบ การค้นหา และแผนภูมิ

คุณสามารถตรวจสอบทั้งหมดได้ในส่วนตัวอย่างของเว็บไซต์

⬆ กลับไปด้านบน


5. เปรียบเทียบกับโครงการอื่นๆ

ที่นี่ เราจะแบ่งปันว่า ReactiveSearch เปรียบเทียบกับโครงการอื่นๆ ที่มีเป้าหมายคล้ายกันอย่างไร

- ค้นหาเชิงโต้ตอบ ชุดค้นหา ค้นหาทันใจ
แบ็กเอนด์ Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI ดัชนี Elasticsearch ใด ๆ ที่โฮสต์บนคลัสเตอร์ Elasticsearch ใด ๆ สร้างขึ้นเป็นพิเศษสำหรับ Algolia ซึ่งเป็นเครื่องมือค้นหาที่เป็นกรรมสิทธิ์
การพัฒนา พัฒนาและบำรุงรักษาอย่างแข็งขัน การตอบสนองปัญหาที่เกิดขึ้น การพัฒนาและการบำรุงรักษาบางส่วน พัฒนาและบำรุงรักษาอย่างแข็งขัน
ประสบการณ์การเริ่มต้นใช้งาน แอปเริ่มต้น บทช่วยสอนแบบโต้ตอบสด คู่มือเริ่มต้นใช้งาน สนามเด็กเล่นส่วนประกอบ ทุกส่วนประกอบมีการสาธิตการทำงานสดพร้อมโค้ดแซนด์บ็อกซ์ การเริ่มต้นใช้งานบทช่วยสอน ไม่มีการสาธิตส่วนประกอบแบบสด ข้อกำหนดอ้างอิงแบบกระจัดกระจายสำหรับส่วนประกอบจำนวนมาก แอปเริ่มต้น คู่มือเริ่มต้นใช้งาน สนามเด็กเล่นส่วนประกอบ
สนับสนุนการจัดแต่งทรงผม ส่วนประกอบที่มีสไตล์และกำหนดขอบเขต ไม่จำเป็นต้องนำเข้า CSS ภายนอก ธีมที่หลากหลายได้รับการสนับสนุนเป็นอุปกรณ์ประกอบฉาก React สไตล์ที่ใช้ CSS พร้อม BEM ไม่ได้กำหนดขอบเขตไว้ที่ส่วนประกอบ ธีมได้รับการสนับสนุนด้วย SCSS สไตล์ที่ใช้ CSS จำเป็นต้องนำเข้าสไตล์ภายนอก ธีมได้รับการสนับสนุนโดยการจัดการ CSS
ประเภทของส่วนประกอบ รายการ ช่วง การค้นหา วันที่ แผนที่ การแสดงผลลัพธ์ สามารถใช้ส่วนประกอบ UI ของคุณเองได้ รายการ ช่วง ค้นหา* ผลลัพธ์* ไม่สามารถใช้ส่วนประกอบ UI ของคุณเองได้ (เพียงองค์ประกอบเดียวสำหรับ Search และ Results ทำให้มีการเขียนโค้ดเพิ่มเติมเพื่อปรับแต่งได้) รายการ ช่วง ค้นหา ผลลัพธ์ สามารถใช้ส่วนประกอบ UI ของคุณเองได้
แพลตฟอร์มการจัดจำหน่ายที่รองรับ React, Vue สำหรับเว็บ, React Native สำหรับมือถือ ตอบสนองต่อเว็บ React, Vue, Angular, vanilla JS สำหรับเว็บ, React Native สำหรับมือถือ แต่รุ่นหลังไม่มีส่วนประกอบ UI

เรายินดีต้อนรับการมีส่วนร่วมในส่วนนี้ หากคุณกำลังสร้างโปรเจ็กต์หรือรู้จักโปรเจ็กต์อื่นที่อยู่ในพื้นที่ใกล้เคียงกัน โปรดแจ้งให้เราทราบ แล้วเราจะอัปเดตการเปรียบเทียบ

⬆ กลับไปด้านบน


6. การติดตั้ง

การติดตั้ง ReactiveSearch เป็นเพียงคำสั่งเดียว

  • หากคุณกำลังใช้การค้นหาเชิงโต้ตอบสำหรับ React 
 npm install @ appbaseio / reactivesearch

คุณสามารถดูคู่มือการเริ่มต้นฉบับย่อด้วย React ได้ที่นี่

  • หากคุณกำลังใช้การค้นหาเชิงโต้ตอบสำหรับ Vue 
 npm install @ appbaseio / reactivesearch - vue

คุณสามารถดูคู่มือการเริ่มต้นฉบับย่อด้วย Vue ได้ที่นี่


7. คู่มือเอกสาร

เอกสารอย่างเป็นทางการสำหรับไลบรารี React อยู่ที่ docs.reactivesearch.io/docs/reactivesearch/react

ส่วนประกอบแบ่งออกเป็นสี่ส่วน:

  • ส่วนประกอบ UI ตามรายการอยู่ที่ reactivesearch/react/list
  • ส่วนประกอบ UI ตามช่วงอยู่ที่ปฏิกิริยาค้นหา/ตอบสนอง/ช่วง
  • ส่วนประกอบ UI การค้นหาอยู่ที่ reactivesearch/react/search
  • องค์ประกอบผลลัพธ์อยู่ที่ปฏิกิริยาการค้นหา/ปฏิกิริยา/ผลลัพธ์
  • ส่วนประกอบของแผนที่อยู่ที่ reactivesearch/react/map
  • ส่วนประกอบของแผนภูมิอยู่ที่ปฏิกิริยาการค้นหา/ปฏิกิริยา/แผนภูมิ

ไลบรารีเวอร์ชัน Docs for Vue มีอยู่ที่ docs.reactivesearch.io/docs/reactivesearch/vue

⬆ กลับไปด้านบน


8. การบริจาค

โปรดตรวจสอบคู่มือการบริจาค


9. โครงการอื่น ๆ ที่คุณอาจชอบ

  • ReactiveSearch API API Gateway สำหรับ ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (ความปลอดภัยนอกกรอบ คุณสมบัติการจำกัดอัตรา การวิเคราะห์บันทึก และบันทึกคำขอ)

  • ช่องค้นหา ไลบรารี UI ช่องค้นหาน้ำหนักเบาและเน้นประสิทธิภาพเพื่อค้นหาและแสดงผลลัพธ์ด้วย ReactiveSearch Cloud

    • วานิลลา เจ.เอส
    • กระพือปีก

  • dejavu Elasticsearch / OpenSearch โปรแกรมดูและแก้ไขข้อมูล

  • appbase-js สำหรับเมื่อคุณต้องการจัดทำดัชนีข้อมูลนอกเหนือจากส่วนประกอบ UI

⬆ กลับไปด้านบน

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด