hitswa/search.html

## search.html
<!DOCTYPE html>
<html>
<head>
	<title>Search</title>
	<style type="text/css">
		ul#searchList {
			list-style-type: none;
			list-style-position: inside;
			display:block;
			position:relative;
			border:1px solid black;
			margin: 0;
  			padding: 0;
  			display: none;
		}
		ul#searchList li {
			border-bottom: 1px solid black;
			list-style-position: inside;
			cursor: pointer;
		}
	</style>
</head>
<body>


	<input id="searchBox" type="" name="">
	<ul id="searchList">
		<li>Chrome</li>
		<li>Safari</li>
		<li>Internet Explorer</li>
		<li>Mozilla Firefox</li>
	</ul>


	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
		$(document).ready(function(){
			$('#searchList').width( $('#searchBox').width() );

			$( window ).resize(function() {
			  $('#searchList').width( $('#searchBox').width() );
			});

			$('body').on('focus','#searchBox',function(){
				$('#searchList').show();
			});

			$('body').on('keyup','#searchBox',function(){
				var value = $(this).val().toLowerCase();
				console.log(value);
				$("li").filter(function() {
			      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
			    });
			})

			$('body').on('click','ul#searchList li',function(){
				$('#searchBox').val($(this).text());
				$('#searchList').hide();
			});
		});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Search</title>
	<style type="text/css">
	ul#searchList {
	list-style-type: none;
	list-style-position: inside;
	display:block;
	position:relative;
	border:1px solid black;
	margin: 0;
	padding: 0;
	display: none;
	}
	ul#searchList li {
	border-bottom: 1px solid black;
	list-style-position: inside;
	cursor: pointer;
	}
	</style>
	</head>
	<body>


	<input id="searchBox" type="" name="">
	<ul id="searchList">
	<li>Chrome</li>
	<li>Safari</li>
	<li>Internet Explorer</li>
	<li>Mozilla Firefox</li>
	</ul>


	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
	$(document).ready(function(){
	$('#searchList').width( $('#searchBox').width() );

	$( window ).resize(function() {
	$('#searchList').width( $('#searchBox').width() );
	});

	$('body').on('focus','#searchBox',function(){
	$('#searchList').show();
	});

	$('body').on('keyup','#searchBox',function(){
	var value = $(this).val().toLowerCase();
	console.log(value);
	$("li").filter(function() {
	$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
	});
	})

	$('body').on('click','ul#searchList li',function(){
	$('#searchBox').val($(this).text());
	$('#searchList').hide();
	});
	});
	</script>
	</body>
	</html>