<div id="app"></div>
.search {
  
  &__query {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:41px;
    display:flex;
    border-bottom:1px solid #ddd;
  }
  
  .search-box {
    height:40px;
    flex:1;
  }
  
  .search-box__loader {
    display:none
  }
  
  &__results {
    position:absolute;
    top:41px;
    left:0;
    right:0;
    padding:20px;
  }
  
  .hits-hit {
    text-align:center;
    
    a {
      text-decoration:none;
    }
    &__poster {
      max-width:100px;
      max-height:140px;
      display:inline-block;
    }
    &__title {
      font-size:12px;
      text-align:center;
      margin-top:5px;
    }
  }
  
}
 
const host = "http://demo.searchkit.co/api/movies"
const sk = new Searchkit.SearchkitManager(host, {

})

class Application extends React.Component {
  render() {
    const SearchkitProvider = Searchkit.SearchkitProvider;
    const Searchbox = Searchkit.SearchBox;
    const RefinementListFilter = Searchkit.RefinementListFilter;
    return (<div>
      
      <SearchkitProvider searchkit={sk}>
         <div className="search">
            <div className="search__query">
            <Searchbox searchOnChange={true} prefixQueryFields={["actors^1","type^2","languages","title^10"]} />
            </div>
            <div className="search__results">
            <RefinementListFilter id="actors" title="Actors" field="actors.raw" operator="AND"/>

            </div>
         </div>
      </SearchkitProvider>

    </div>);
  }
}

React.render(<Application />, document.getElementById('app'));
View Compiled

External CSS

  1. //cdn.jsdelivr.net/searchkit/0.6.2/styles.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js
  2. //cdn.jsdelivr.net/searchkit/0.6.2/bundle.js