CheckboxFilter

Developer
Gregory Potdevin
Size
5,749 Kb
Views
16,192
  1. CheckboxFilter Previews
  2. CheckboxFilter HTML Codes
  3. CheckboxFilter CSS Codes
  4. CheckboxFilter JS Codes

How do I make an checkboxfilter?

What is a checkboxfilter? How do you make a checkboxfilter? This script and codes were developed by Gregory Potdevin on 01 October 2022, Saturday.

CheckboxFilter Previews
IQ Test

CheckboxFilter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CheckboxFilter</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/searchkit/0.4.0/styles.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<script src='http://cdn.jsdelivr.net/searchkit/0.4.0/bundle.js'></script> <script src="js/index.js"></script>
</body>
</html>

CheckboxFilter - Script Codes CSS Codes

.search__query { position: absolute; top: 0; left: 0; right: 0; height: 41px; display: flex; border-bottom: 1px solid #ddd;
}
.search .search-box { height: 40px; flex: 1;
}
.search .search-box__loader { display: none;
}
.search__results { position: absolute; top: 41px; left: 0; right: 0;
}
.search .hits-list-item { display: block; padding: 16px; width: 100%;
}
.search .hits-hit { text-align: center;
}
.search .hits-hit a { text-decoration: none;
}
.search .hits-hit__poster { max-width: 100px; max-height: 140px; display: inline-block;
}
.search .hits-hit__title { font-size: 12px; text-align: center; margin-top: 5px;
}

CheckboxFilter - Script Codes JS Codes


const host = "https://kili-eu-west-1.searchly.com/movies/"
const sk = new Searchkit.SearchkitManager(host, { multipleSearchers:false, basicAuth:"read:teetndhjnrspbzxxyfxmf5fb24suqxuj"
})
const FastClick = Searchkit.FastClick;
const SearchkitProvider = Searchkit.SearchkitProvider;
const Searchbox = Searchkit.SearchBox;
const Hits = Searchkit.Hits;
const HitsStats = Searchkit.HitsStats;
class FilterCheckboxItemComponent extends React.Component { render() { const {bemBlocks, toggleFilter, translate, selected, label, count, showCount } = this.props const block = bemBlocks.option const className = block() .state({selected}) .mix(bemBlocks.container("item")) return ( <FastClick handler={toggleFilter}> <div className={className} data-qa="option"> <div data-qa="checkbox" className={block("checkbox").state({ selected }) }></div> <div data-qa="label" className={block("text")}>{label}</div> {showCount ? (<div data-qa="count" className={block("count")}>{count}</div>) : undefined} </div> </FastClick> )
}
}
class CheckboxFilter extends Searchkit.SearchkitComponent { accessor:FacetAccessor defaultProps={ showCount: true } defineAccessor() { const { field, id, title, translations } = this.props; return new Searchkit.FacetAccessor( field,{ id, operator:"AND", title, size: 50, translations }) } defineBEMBlocks() { var blockName = "refinement-list" return { container: blockName, option: `${blockName}-option` } } onToggleFilter(){ this.accessor.state = this.accessor.state.toggle(this.props.value) this.searchkit.performSearch() } hasOptions(){ return this.accessor.getBuckets().length != 0 } render(){ const { id, field, value, title, label, showCount } = this.props; let block = this.bemBlocks.container let className = block() .mix(`filter--${id}`) const selected = this.accessor.state.contains(value) const key = value.toLowerCase(); var option = this.accessor.getBuckets().find(v => v.key === key); const count = option ? option.doc_count : 0; return ( <div className={className}> <div data-qa="header" className={block("header")}>{title}</div> <div data-qa="options" className={block("options")}> <FilterCheckboxItemComponent label={label} count={count} showCount={showCount} selected={selected} translate={this.translate.bind(this)} bemBlocks={this.bemBlocks} toggleFilter={this.onToggleFilter.bind(this)} /> </div> </div> ) }
}
class MovieHits extends Searchkit.Hits { renderResult(result:any) { if (this.props.displayMode === "thumbnail"){ return this.renderThumbnail(result); } else { return this.renderList(result); } } renderList(result:any) { let url = "http://www.imdb.com/title/" + result._source.imdbId return ( <div className="hits-list-item" key={result._id}> <a href={url} target="_blank">{result._source.title}</a> , {result._source.genres.join(', ')} </div> ) } renderThumbnail(result:any) { let url = "http://www.imdb.com/title/" + result._source.imdbId return ( <div className={this.bemBlocks.item().mix(this.bemBlocks.container("item"))} key={result._id}> <a href={url} target="_blank"> <img className={this.bemBlocks.item("poster")} src={result._source.poster} width="100" height="140"/> <div className={this.bemBlocks.item("title")}>{result._source.title}</div> </a> </div> ) }
}
class Application extends React.Component { constructor() { super() this.state = { displayMode:"thumbnail" } } onDisplayModeChange(e){ this.setState({displayMode: e.target.value}) } render() { const { displayMode } = this.state; 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"> <CheckboxFilter id="rated" showCount={false} field="rated" value="r" title="Movie rating" label={<span>Rated <b>R</b></span>} /> <HitsStats/> <select value={displayMode} onChange={this.onDisplayModeChange.bind(this)}> <option value="thumbnail">Thumbnail</option> <option value="list">List</option> </select> <MovieHits hitsPerPage={12} displayMode={displayMode}/> </div> </div> </SearchkitProvider> </div>); }
}
React.render(<Application />, document.getElementById('app'));
CheckboxFilter - Script Codes
CheckboxFilter - Script Codes
Home Page Home
Developer Gregory Potdevin
Username GregoryPotdevin
Uploaded October 01, 2022
Rating 3
Size 5,749 Kb
Views 16,192
Do you need developer help for CheckboxFilter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gregory Potdevin (GregoryPotdevin) Script Codes
Name
RefinementListFilter sort
A Pen by Gregory Potdevin
Shape Maker
Line
Climb
Penninghen
Turn
A Pen by Gregory Potdevin
RangeFilter
Guass
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!