JSFiddle - React, Tailwind, and code Playground

HTML

<div class='fuzzy-search-wrapper'>
  <div class='fuzzy-search'>
    <input type='text' class='search-query' autofocus>
  </div>

  <ul>
  </ul>
</div>
<h4>Search items:</h4>
<ul id='demoItems'>
</ul>

JavaScript

/*
 fuzzy.js v0.0.2
 (c) 2013 Ben Ripkens
 License: MIT
*/
(function(context){"use strict";var fuzzy=function fuzzy(term,query){var max=calcFuzzyScore(term,query);var termLength=term.length;if(fuzzy.analyzeSubTerms){for(var i=1;i<termLength&&i<fuzzy.analyzeSubTermDepth;i++){var subTerm=term.substring(i);var score=calcFuzzyScore(subTerm,query);if(score.score>max.score){score.term=term;score.highlightedTerm=term.substring(0,i)+score.highlightedTerm;max=score}}}return max};var calcFuzzyScore=function calcFuzzyScore(term,query){var score=0;var termLength=term.length;var queryLength=query.length;var highlighting="";var ti=0;var previousMatchingCharacter=-2;for(var qi=0;qi<queryLength&&ti<termLength;qi++){var qc=query.charAt(qi);var lowerQc=qc.toLowerCase();for(;ti<termLength;ti++){var tc=term.charAt(ti);if(lowerQc===tc.toLowerCase()){score++;if(previousMatchingCharacter+1===ti){score+=2}highlighting+=fuzzy.highlighting.before+tc+fuzzy.highlighting.after;previousMatchingCharacter=ti;ti++;break}else{highlighting+=tc}}}highlighting+=term.substring(ti,term.length);return{score:score,term:term,query:query,highlightedTerm:highlighting}};fuzzy.matchComparator=function matchComparator(m1,m2){return m2.score-m1.score};fuzzy.analyzeSubTerms=false;fuzzy.analyzeSubTermDepth=10;fuzzy.highlighting={before:"<em>",after:"</em>"};if(typeof module!=="undefined"&&module.exports){module.exports=fuzzy}else if(typeof define==="function"){define(function(){return fuzzy})}else{var previousFuzzy=context.fuzzy;fuzzy.noConflict=function(){context.fuzzy=previousFuzzy;return fuzzy};context.fuzzy=fuzzy}})(this);

(function() {
  fuzzy.analyzeSubTerms = true;

  var options = [
  		'NOT_AN_ATMEL',
      'ATMEGA32',
     ...