JSFiddle - React, Tailwind, and code Playground

by Edward

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script src="https://raw.githubusercontent.com/javve/list.pagination.js/v0.1.0/dist/list.pagination.min.js"></script>
<script src="https://raw.githubusercontent.com/javve/list.fuzzysearch.js/v0.1.0/dist/list.fuzzysearch.min.js"></script>
<div id="character-list">
    <input class="fuzzy-search"/>
    <ul class="list"></ul>
</div>

JavaScript

var options = {
    item: '<li><p class="character"></p></li>'
    ,plugins:[
        ListFuzzySearch()
    ]
};

var values = [
    { character: "Guybrush Threepwood" },
    { character: "Manny Calavera" },
    { character: "Bernard Bernoulli" },
    { character: "Bruce Willis" },
    { character: "Bruce Cambell" },
];

var charList = new List('character-list', options, values);