<ozone-free-text-search>

Material design for free text search box.

install

$ npm install --save ozone-free-text-search

usage

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>

Events

taktik-search: Fired when the search is submitted. The value of the search query can be found in the detail.

Styling

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 | {}