Search

Standard

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


<mc-search id=one incremental placeholder=search>
  <mc-avatar slot=trailing><img alt=photo src=../../woman.jpg></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 history incremental placeholder=search>
  <mc-avatar slot=trailing><img alt=photo src=../../woman.jpg></mc-avatar>
</mc-search>


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


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

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

Speech

Speech recognition will only show if browser supports it

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

Option groups

You can show results in multiple groups with headers

<mc-search id=four incremental placeholder=search>
  <mc-avatar slot=trailing><img alt=photo src=../../woman.jpg></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 incremental placeholder=search>
  <mc-avatar slot=trailing><img alt=photo src=../../woman.jpg></mc-avatar>
  <mc-chip label="Event numbers" filter 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>