JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<section class="main">
	 <form class="search" method="post" action="index.html" id="searchform">
		 <input type="text" name="q" placeholder="Search..." id="searchbox" />

		 <ul class="results">
			 <li ><a href="#">A<br /><span>Description...</span></a></li>
			 <li><a href="#">B<br /><span>Description...</span></a></li>
	 		<li><a href="#">C<br /><span>Description...</span></a></li>
         	<li><a href="#">D<br /><span>Description...</span></a></li>
		 </ul>
		 		 
	 </form>
</section>

CSS

/* * Copyright (c) 2012 Thibaut Courouble
 * Licensed under the MIT License
   ================================================== */

body {
    background: #f7f7f7;
    color: #404040;
    font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}

a {
    color: #1e7ad3;
    text-decoration: none;
}

a:hover { text-decoration: underline }

.container, .main {
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
}

.main { margin-top: 50px }

input {
    font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #555860;
}

.search {
    position: relative;
    margin: 0 auto;
    width: 300px;
}

.search input {
    height: 26px;
    width: 100%;
    padding: 0 12px 0 25px;
    background: white url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color: #a8acbc #babdcc #c0c3d2;
    border-radius: 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}

.search input:focus {
    outline: none;
    border-color: #66b1ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }

.search .results {
    display: none;
    position: absolute;
    top: 35px;
   ...

JavaScript

jQuery(function ($) {console.log($(window));
	$("#searchbox").keyup(function () {
		$("li").hide();
		$("li").each(function (index) {
			if ($(this).text().indexOf($("#searchbox").val()) > -1) {
				$(this).show();
			}
		});
	});
	$("li a").click(function (e) {console.log('here')
    
		alert("HI");
		alert($(this).text());
e.preventDefault();
	});
});