searchkit - React搜索組件

jopen 8年前發布 | 17K 次閱讀 searchkit ElasticSearch 搜索引擎

searchkit - React組件。提供最簡便的方式來利用Elasticsearch構建一個強大的搜索體驗。


See full Documentation or Getting Started

Quick Intro

Live demo

const host = "https://kili-eu-west-1.searchly.com/movies/"
const searchkit = new SearchkitManager(host, {
  multipleSearchers:false,
  basicAuth:"read:teetndhjnrspbzxxyfxmf5fb24suqxuj"
})

const App = ()=> (
  <SearchkitProvider searchkit={searchkit}>
    <div>
      <div className="example-search-site__query">
        <SearchBox
         autofocus={true}
         searchOnChange={true}
         prefixQueryFields={["actors^1","type^2","languages","title^10"]}/>
      </div>
      <div className="example-search-site__applied-filters">
        <SelectedFilters/>
        <ResetFilters/>
        <HitsStats/>
      </div>
      <div className="example-search-site__filters">
        <HierarchicalMenuFilter
          fields={["type.raw", "genres.raw"]}
          title="Categories"
          id="categories"/>
        <RefinementListFilter
          id="actors"
          title="Actors"
          field="actors.raw"
          operator="AND"
          size={10}/>
      </div>
      <div className="example-search-site__results">
        <Hits hitsPerPage={10}/>
      </div>
    </div>
  </SearchkitProvider>
)

ReactDOM.render(<App/>, document.getElementById('root'))

項目地址： https://github.com/searchkit/searchkit

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！