search.html

---
layout: layouts/main.html
title: Search
templateClass: tmpl-home
eleventyNavigation:
  key: Search
  order: 4
---
<h1>Search</h1>
<div class="search" id="search"></div>
<script src="/js/mithril.min.js"></script>
<script>

  // State & Actions

  const State = () => ({
    formData: {
      input: '',
      words: []
    },
    rawData: [],
    filteredData: [],
  })

  const Actions = state => ({
    filter: (input) => {
      state.formData.input = input
      state.formData.words = splitInput(input)
      if (state.formData.words.length === 0) {
        state.filteredData = []
        return
      }
      state.filteredData = filterDataByWords(
        state.rawData,
        state.formData.words
      )
    },
    reset: () => {
      state.formData.input = ''
      state.formData.words = []
      state.filteredData = []
    }
  })

  const state = State()
  const actions = Actions(state)

  // Helpers

  const focus = ({dom}) => setTimeout(() => dom.focus())
  const filter = (e) => {
    localStorage.setItem('search', e.target.value)
    actions.filter(e.target.value)
  }
  const reset = () => {
    localStorage.setItem('search', '')
    actions.reset()
  }
  const highlight = (string, words) => {
    const pattern = new RegExp(words.join('|'), 'gi')
    return string.replace(pattern, (word) => {
      return '<span class="search__highlighted">' + word + '</span>';
    })
  }
  const splitInput = (input) => {
    input = input.trim()
    return input.length > 0 ? input.split(/\s+/) : []
  }
  const filterDataByWords = (data, words) => data.filter(item => {
    let filtered = true
    words.map(word => {
      filtered &= item.title.toLowerCase().indexOf(word.toLowerCase()) > -1
    })
    return filtered
  })

  // Components

  const Form = {
    view: ({attrs: {state}}) => m('.search__form', [
      m('input.search__input[type=text]', {
        placeholder: 'e.g. component',
        oncreate: focus,
        onupdate: focus,
        oninput: filter,
        value: state.formData.input
      }),
      state.formData.input.length > 0
        ? m('button.search__reset', {onclick: reset}, 'Reset')
        : ''
    ])
  }

  const List = {
    view: ({attrs: {state}}) => {
      return state.filteredData.length > 0
        ? [
          m('p', state.filteredData.length + ' examples found.'),
          m('ul.search__results', state.filteredData.map(example => {
            return m('li.search__result', m('a.search__link', {href: example.url}, m.trust(
              highlight(example.title, state.formData.words)
            )))
          }))
        ]
        : state.formData.input.length > 0
          ? m('p', 'Your search did not match any examples.')
          : m('p', 'Search here for Mithril.js examples.')
    }
  }

  // Application

  m.mount(document.getElementById('search'), {
    oninit: async () => {
      state.rawData = await m.request('/api/examples.json')
      const input = localStorage.getItem('search') || ''
      if (input.length > 0) {
        actions.filter(input)
      }
    },
    view: () => [
      m(Form, {state, actions}),
      m(List, {state})
    ]
  })
</script>