react minisearch ดาวน์โหลด - react minisearch ดาวน์โหลดซอร์สโค้ด

react minisearch

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

โต้ตอบ MiniSearch

ตอบสนองการรวมสำหรับไลบรารีการค้นหาข้อความแบบเต็มฝั่งไคลเอ็นต์ MiniSearch

เริ่มต้นใช้งาน

การติดตั้ง:

ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง React และ MiniSearch เวอร์ชันที่เข้ากันได้แล้ว

จากนั้นทำการติดตั้งผ่าน NPM หรือ Yarn :

 # With NPM:
npm install react-minisearch

# Or with Yarn:
yarn add react-minisearch

การใช้งาน:

มีสามวิธีหลักในการใช้ react-minisearch : hook useMiniSearch , ส่วนประกอบที่มีลำดับสูงกว่า withMiniSearch หรือส่วนประกอบ wrapper WithMiniSearch

ทั้งสามวิธีรับข้อโต้แย้งต่อไปนี้ (หรืออุปกรณ์ประกอบฉากสำหรับส่วนประกอบ wrapper):

การรวบรวมเอกสารเบื้องต้นเพื่อเพิ่มลงในดัชนี หมายเหตุ: นี่เป็นเพียงคอลเลกชันเริ่มต้น และการเปลี่ยนแปลงอาร์กิวเมนต์นี้จะไม่ทำให้เกิดการจัดทำดัชนีใหม่ หากต้องการเพิ่มหรือลบเอกสารหลังจากการกำหนดค่าเริ่มต้น ให้ใช้ฟังก์ชัน add / addAll / remove / removeAll / discard ฯลฯ
ตัวเลือกการกำหนดค่า MiniSearch

การใช้ตะขอ useMiniSearch:

 import { useMiniSearch } from 'react-minisearch'

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponent = ( ) => {
  const { search , searchResults } = useMiniSearch ( documents , miniSearchOptions )

  const handleSearchChange = ( event ) => {
    search ( event . target . value )
  }

  return (
    < div >
      < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

      < ol >
        < h3 > Results: < / h3 >
        {
          searchResults && searchResults . map ( ( result , i ) => {
            return < li key = { i } > { result . name } < / li >
          } )
        }
      < / ol >
    < / div >
  )
}

การใช้ส่วนประกอบที่มีลำดับสูงกว่า withMiniSearch:

 import { withMiniSearch } from 'react-minisearch'

const MyComponent = ( { search , searchResults } ) => {

  const handleSearchChange = ( event ) => {
    search ( event . target . value )
  }

  return (
    < div >
      < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

      < ol >
        < h3 > Results: < / h3 >
        {
          searchResults && searchResults . map ( ( result , i ) => {
            return < li key = { i } > { result . name } < / li >
          } )
        }
      < / ol >
    < / div >
  )
}

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponentWithSearch = withMiniSearch ( documents , miniSearchOptions , MyComponent )

การใช้คอมโพเนนต์ wrapper WithMiniSearch:

 import { WithMiniSearch } from 'react-minisearch'

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponent = ( ) => (
  < WithMiniSearch documents = { documents } options = { miniSearchOptions } >
    {
      ( { search , searchResults } ) => {
        const handleSearchChange = ( event ) => {
          search ( event . target . value )
        }

        return (
          < div >
            < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

            < ol >
              < h3 > Results: < / h3 >
              {
                searchResults && searchResults . map ( ( result , i ) => {
                  return < li key = { i } > { result . name } < / li >
                } )
              }
            < / ol >
          < / div >
        )
      }
    }
  < / WithMiniSearch >
)

อุปกรณ์ประกอบฉากที่ให้มา:

ชุดอุปกรณ์ประกอบฉากที่สมบูรณ์ซึ่งจัดทำโดย react-minisearch จะเหมือนกันสำหรับทั้งสามวิธี ( useMiniSearch , withMiniSearch หรือ WithMiniSearch ):

search(query: string, searchOptions?: SearchOptions) => void : ฟังก์ชั่นที่จะเรียกใช้เพื่อทำการค้นหา
searchResults: T[] | null : อาร์เรย์ของผลการค้นหา หรือ null เมื่อไม่มีการค้นหาหรือล้างการค้นหา
rawResults: SearchResult[] | null : อาร์เรย์ของผลการค้นหาดิบจาก MiniSearch รวมถึงคะแนนและข้อมูลการแข่งขัน หรือ null เมื่อไม่มีการค้นหาหรือล้างการค้นหา
clearSearch() => void : ฟังก์ชันที่จะเรียกใช้เพื่อล้างการค้นหา (ตั้งค่า searchResults เป็น null )
autoSuggest(query: string, searchOptions?: SearchOptions) => void : ฟังก์ชั่นที่จะเรียกใช้เพื่อรับคำแนะนำอัตโนมัติ
suggestions: Suggestion[] | null : อาร์เรย์ของคำแนะนำอัตโนมัติ หรือ null เมื่อไม่ได้ใช้หรือล้างคำแนะนำอัตโนมัติ
clearSuggestions() => void : ฟังก์ชั่นที่จะเรียกใช้เพื่อล้างข้อเสนอแนะ (ตั้งค่า suggestions เป็น null )
add(document: T) => void : ฟังก์ชั่นเพิ่มเอกสารใหม่ลงในดัชนี
addAll(documents: T[]) => void : ฟังก์ชั่นเพื่อเพิ่มเอกสารใหม่หลายฉบับลงในดัชนีเป็นกลุ่ม
addAllAsync(documents: T[], options?: object) => Promise<void> : เหมือนกับ addAll แต่ทำงานแบบอะซิงโครนัสและเป็นกลุ่มเพื่อหลีกเลี่ยงการบล็อก UI
remove(document: T) => void : ฟังก์ชันเพื่อลบเอกสารออกจากดัชนี
removeById(id: any) => void : ฟังก์ชันเพื่อลบเอกสารออกจากดัชนีด้วย ID
removeAll(documents?: T[]) => void : ฟังก์ชั่นเพื่อลบเอกสารหลายฉบับหรือเอกสารทั้งหมดออกจากดัชนี
discard(id: any) => void : ละทิ้งเอกสารด้วย ID ของมัน (เหมือนกับ removeById )
discardAll(ids: readonly any[]) => void : ทิ้งเอกสารหลายฉบับพร้อมกันด้วย ID ของพวกเขา
replace(document: T) => void : แทนที่เอกสารที่มีอยู่ด้วยเวอร์ชันใหม่
isIndexing: boolean : ตั้งค่าเป็น true เมื่อกำลังสร้างดัชนีผ่าน addAllAsync มิฉะนั้นจะ false
miniSearch: MiniSearch : อินสแตนซ์ MiniSearch สำหรับกรณี (พบไม่บ่อย) เมื่อจำเป็นต้องใช้โดยตรง