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

Thumbnail
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 Codepen.io
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>
  </dl>
</div>

/*Downloaded from https://www.codeseek.co/herudea/list-js-fuzzy-test-RKvqJY */
    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 https://www.codeseek.co/herudea/list-js-fuzzy-test-RKvqJY */
    var monkeyList = new List('test-list', { 
  valueNames: ['name', 'category', 'another']
});

Comments