List JS Fuzzy Test

In this example below you will see how to do a List JS Fuzzy Test with some HTML / CSS and Javascript

This awesome code was written by herudea, you can see more from this user in the personal repository.
You can find the original code on
Copyright herudea ©
  • HTML
  • CSS
  • JavaScript
    <div id="test-list">
  <input type="text" class="fuzzy-search" placeholder="Search" />
  <dl class="list">
    <dt><p class="category">Something</p></dt>
    <dd><p class="name">Another thing</p></dd>
    <dt><p class="category">red 2373</p></dt>
    <dd><p class="name">Charles Barkley</p></dd>
    <dt><p class="category">Corgi Butts</p></dt>
    <dd><p class="name">Cat's tea time</p></dd>
    <dt><p class="category">Fake Id</p></dt>
		<dd><p>Guilty Conscience on <span class="another">lofty ideas's</span> mandible</p></dd>
    <dt><p class="category">Let's make a ddst</p></dt>
    <dd><p class="name">BDS</p></dd>
    <dt><p class="category">Lies and Turncoats</p></dt>
    <dd><p class="name">Another thing</p></dd>

/*Downloaded from */
    body {
	font-family: 'Roboto Slab', serif;
	padding: 2rem;

#test-list {
	input {
		padding: .5rem;
		font-family: 'Roboto Slab', serif;
		font-weight: 400;
	dl {
		margin: 0;
		font-size: .9rem;
		p {
			margin: 0;
		dt {
			font-weight: 700;
			margin-top: 1em;
		dd {
			font-weight: 300;
			margin: 0;

/*Downloaded from */
    var monkeyList = new List('test-list', { 
  valueNames: ['name', 'category', 'another']