Search

Standard

By default the search event only triggers on enter key. Look at next example for how to change that.

<!-- incremental debounces the input and fires the search
  If not present then the enter key will fire the search -->
<mc-search id="one" placeholder="search" incremental>
  <mc-avatar slot="trailing"><img alt="photo" src="../../woman.jpg"></img></mc-avatar>
  <mc-search-option-group id="secondary" label="Secondary"></mc-search-option-group>
</mc-search>

// get selected value and object
searchOne.addEventListener('change', () => console.log(searchOne.selected, searchOne.selectedObject));
  console.log('okokokko')
document.querySelector('mc-search#one').addEventListener('search', event => {
  // set results
  event.target.results = [{
    value: 'one',
    display: 'One',
  },{
    value: 'two',
    display: 'Two',

    // specify container to place in mc-search-option-group#secondary
    container: 'secondary'
  }].filter(v => v.display.toLocaleLowerCase().includes(event.target.value));


  // set suggestions for searches
  event.target.suggestions = [{
    value: 'one'
  },{
    value: 'two'
  }].filter(v => v.display.toLocaleLowerCase().includes(event.target.value));
});

History

Sow historical suggestions. History is stored in localstorage to maintains across refreshes

<mc-search placeholder="search" incremental history>
  <mc-avatar slot="trailing"><img alt="photo" src="../../woman.jpg"></img></mc-avatar>
</mc-search>

<!-- set history id to use the same history for multiple searches -->
<mc-search placeholder="search" incremental history="id">
  <mc-avatar slot="trailing"><img alt="photo" src="../../woman.jpg"></img></mc-avatar>
</mc-search>

<!-- set history max. Default: 100 -->
<mc-search placeholder="search" incremental history history-max="100">
  <mc-avatar slot="trailing"><img alt="photo" src="../../woman.jpg"></img></mc-avatar>
</mc-search>

// clear search history
document.querySelector('mc-search').clearHistory();

Speech

Speech recognition will only show if browser supports it

<mc-search placeholder="search" incremental speech>
  <mc-avatar slot="trailing"><img alt="photo" src="../../woman.jpg"></img></mc-avatar>
</mc-search>

Option groups

You can show results in multiple groups with headers

<mc-search id="four" placeholder="search" incremental>
  <mc-avatar slot="trailing"><img alt="photo" src="../../woman.jpg"></img></mc-avatar>
  <mc-search-option-group id="primary" label="Primary"></mc-search-option-group>
  <mc-search-option-group id="secondary" label="Secondary"></mc-search-option-group>
</mc-search>

Filter chips

Add chip filters to search component

<mc-search id="five" placeholder="search" incremental>
  <mc-avatar slot="trailing"><img alt="photo" src="../../woman.jpg"></img></mc-avatar>
  <mc-chip filter label="Event numbers" slot="chips"></mc-chip>
  <mc-search-container id="primary" label="Primary"></mc-search-container>
  <mc-search-container id="secondary" label="Secondary"></mc-search-container>
</mc-search>