Material design for free text search box.
$ npm install --save ozone-free-text-search
taktik-free-text-search
is a horizontal free text taktik-search bar to any content.
The search api has to be set using metods‘registerAutoCompleteAPI‘ and ‘registerSearchAPI‘
Example:
<paper-material elevation="1">
<style is="custom-style">
.customStyle {
--taktik-search-button: {
background-color: sienna;
color: white;
};
--taktik-auto-complete-items: {
font-family: serif;
};
--taktik-count-result-found:{
color: darkgrey;
}
--taktik-input-color: {
--paper-input-container-focus-color: #2C2958;
}
}
</style>
<taktik-free-text-search
id="taktikFreeTextSearch"
class="customStyle "
search-value="{{search}}"
show-item-count
suggestions="{{autoCompleteResults}}"
search-results="{{result}}">
</taktik-free-text-search>
found {{result.length}} results with "{{search}}".
</paper-material>
<script>
...
this.$.taktikFreeTextSearch.taktikFreeTextSearch('taktik-search', (event) => {
console.log('Search string: ', event.detail)
});
...
@observer('search')
async _searchChange(searchString){
const searchQuery = new SearchQuery()
searchQuery
.quicksearch(this.search)
.setSize(5)
.suggestion(searchString, lastTerm, 5);
const autoComplete = await this.itemClient.search(searchQuery.searchRequest)
this.set('autoCompleteResults', autoComplete.results)
}
</script>
taktik-search: Fired when the search is submitted. The value of the search query can be found in the detail.
The following custom properties and mixins are available for styling:
Custom property | Description | Default |
---|---|---|
--taktik-search-button |
css mixin for the search button | {} |
--taktik-auto-complete-items |
css mixin auto complete paper-items | {} |
--taktik-count-result-found |
css mixin for the number of result found | {} |
--taktik-input-color |
css mixin for the color of the input | {--paper-input-container-focus-color: #2C2958;} |
--taktik-listBox |
css mixin for the list box style | {} |
--taktik-search-disable |
css mixin when search is disable | {} |