微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Searchkit React 建立的 UI 组件

程序名称:Searchkit

Searchkit 介绍

Searchkit 是一套由 React 建立的 UI 组件,它旨在快速创建好看的搜索应用程序。

示例代码:

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

  <SearchkitProvider searchkit={sk}>
    <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'))

Searchkit 官网

http://www.searchkit.co/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐