Fuzzy Search Box

dabblet.css

/**
 * Fuzzy Search Box
 */
html {
	background: hsl(0,0%,15%);
	min-height: 100%;
	
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body {
}

#fzysearch-wrap {
	width: 300px;
	margin: 0 auto;
	padding: 6px;
	position: fixed;
	top: 20px;
	left: 20px;
}

#fzysearch-wrap.has-results {
	border-radius: 6px;
	background: -webkit-linear-gradient(#596369, #354044 80%);
	box-shadow: 0 0 0 1px #19272e, inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.4);
}

#fzysearch-input {
	display: block;
	width: 100%;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	outline: none;
	position: relative;
	z-index: 1;
	background: #fff;
	font-size: 12px;
	padding: 8px 4px 9px 4px;
	font-family: inherit;
	border-radius: 3px;
}

#fzysearch-wrap.has-results #fzysearch-input {
	border-radius: 3px 3px 0 0;
}

#fzysearch-results {
	display: none;
	background: #E4E4E4;
	margin: 0;
	padding: 0;
	font-family: inherit;
	list-style: none;
	border-radius: 0px 0px 3px 3px;
	max-height: 99px;
	overflow-y: auto;
	overflow-x: hidden;
}

#fzysearch-wrap.has-results #fzysearch-results{
	display:block;
}

#fzysearch-results > li {
	padding: 9px 13px 8px;
	margin: 0px;
	display: inline-block;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #424242;
	font-size: 12px;
	cursor: pointer;
	text-shadow: 0 -1px hsl(0,0%,93%);
	line-height: 16px;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#fzysearch-results > li > span {
	background: #ffe057;
	padding: 2px 0;
	border-radius: 2px;
}

#fzysearch-results > li:hover > span, #fzysearch-results > li.selected > span {
	background: none;
}

#fzysearch-results > li:hover, #fzysearch-results > li.selected {
	background: -webkit-linear-gradient(#4AB7E6, #2D95D8);
	color: #f3f3f3;
	text-shadow: 0 1px hsl(0,0%,50%);	
}

#fzysearch-results > li:last-child {
	border-radius: 0 0 3px 3px;
}

dabblet.html

<div id="fzysearch-wrap" class='has-results'>
	<input type="search" id="fzysearch-input" placeholder="Type to Filter" autocomplete='off' value='esu'>
	<ul id="fzysearch-results">
		<li>R<span>esu</span>lt one</li>
		<li>The Second r<span>esu</span>lt</li>
		<li>Another r<span>esu</span>lt</li>
		<li>R<span>esu</span>lt 4</li>
		<li>I am another r<span>esu</span>lt</li>
	</ul>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}