JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
[
  {
    "title": "Old Man's War",
    "author": {
      "firstName": "John",
      "lastName": "Scalzi"
    }
  },
  {
    "title": "The Lock Artist",
    "author": {
      "firstName": "Steve",
      "lastName": "Hamilton"
    }
  },
  {
    "title": "HTML5",
    "author": {
      "firstName": "Remy",
      "lastName": "Sharp"
    }
  },
  {
    "title": "Right Ho Jeeves",
    "author": {
      "firstName": "P.D",
      "lastName": "Woodhouse"
    }
  },
  {
    "title": "The Code of the Wooster",
    "author": {
      "firstName": "P.D",
      "lastName": "Woodhouse"
    }
  },
  {
    "title": "Thank You Jeeves",
    "author": {
      "firstName": "P.D",
      "lastName": "Woodhouse"
    }
  },
  {
    "title": "The DaVinci Code",
    "author": {
      "firstName": "Dan",
      "lastName": "Brown"
    }
  },
  {
    "title": "Angels & Demons",
    "author": {
      "firstName": "Dan",
      "lastName": "Brown"
    }
  },
  {
    "title": "The Silmarillion",
    "author": {
      "firstName": "J.R.R",
      "lastName": "Tolkien"
    }
  },
  {
    "title": "Syrup",
    "author": {
      "firstName": "Max",
      "lastName": "Barry"
    }
  },
  {
    "title": "The Lost Symbol",
    "author": {
      "firstName": "Dan",
      "lastName": "Brown"
    }
  },
  {
    "title": "The Book of Lies",
    "author": {
      "firstName": "Brad",
      "lastName": "Meltzer"
    }
  },
  {
    "title": "Lamb",
    "author": {
      "firstName": "Christopher",
      "lastName": "Moore"
    }
  },
  {
    "title": "Fool",
    "author": {
      "firstName": "Christopher",
      "lastName": "Moore"
    }
  },
  {
    "title": "Incompetence",
    "author": {
      "firstName": "Rob",
      "lastName": "Grant"
    }
  },
  {
    "title": "Fat",
    "author": {
      "firstName": "Rob",
      "lastName": "Grant"
    }
  },
  {
   ...

JavaScript

const decks = [
  {
    name: 'Pirate',
    hero: 'Warrior'
  },
  {
    name: 'Control',
    hero: 'Warrior'
  },
  {
    name: 'Bomb',
    hero: 'Warrior'
  },
  {
    name: 'Face',
    hero: 'Hunter'
  },
  {
    name: 'Mid',
    hero: 'Hunter'
  },
  {
    name: 'Secret',
    hero: 'Rogue'
  },
  {
    name: 'Tempo',
    hero: 'Rogue'
  },
  {
    name: 'Tempo',
    hero: 'Mage'
  },
  {
    name: 'Secret',
    hero: 'Mage'
  }
]

const options = {
  includeScore: true,
  // Search in `author` and in `tags` array
  keys: ['name', 'hero']
}

const fuse = new Fuse(decks, options)

const result = fuse.search('tion');


new Vue({})