Skip to content

Instantly share code, notes, and snippets.

@WarrenPJ

WarrenPJ/zipcode.html

Last active November 18, 2015 21:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WarrenPJ/5ef155789e4fbbc3b063 to your computer and use it in GitHub Desktop.
Save WarrenPJ/5ef155789e4fbbc3b063 to your computer and use it in GitHub Desktop.
Download ZIP
Simple jQuery Zipcode Search
Raw
zipcode.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zip Code Look-Up</title>
<meta name="description" content="Pascal Warren KCE Web Tests">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0, filLen = filter.length;
if(!isNaN(filter)){
if(filLen > 4){
// Loop through the zipcode list
$("nav ul li").each(function(){
// If the list item does not contain the zipcode fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
}
// Show the list item if the phrase matches and make the count equal 1
else {
$(this).fadeIn();
count = 1;
}
if(count == 0){
$("#filter-count").html("Sorry that Zip code or City is not in King County").fadeIn();
} else if(count == 1){
$("#filter-count").html("").stop(true).fadeOut();
}
});
}
else if (filLen > 5 || filLen < 5) {
$("nav ul li").stop(true).fadeOut();
$("#filter-count").html("").stop(true).fadeOut();
}
}
else{
$("#filter-count").html("Please enter only King County Zip Code numbers").fadeIn();
}
});//(End KeyUp)
}); //(jQuery End)
</script>
<!-- JS -->
<style>
html, body{
height:95vh;
}
html {
background-color: #e6e9e9;
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
-webkit-font-smoothing: antialiased;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 800px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
/*box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);*/
}
nav ul li {
display:none;
list-style: none;
margin:10px 0 0 0;
}
#filter-count {
color: rebeccapurple
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<div>
<span>Enter a Zip Code to find your districts PDF</span>
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
</fieldset>
<span id="filter-count"></span>
</form>
<nav>
<ul>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98001 Algona</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98002 Auburn</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98003 Federal Way</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98004 Bellevue</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98005 Bellevue</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98006 Bellevue</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98007 Bellevue</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98008 Bellevue</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98009 Bellevue</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98010 Black Diamond</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98011 Bothel</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98012 Burton</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98013 Vashon</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98014 Carnation</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98015 Bellevue</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98019 DuVall</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98022 Enumclaw</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98023 Federal Way</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98024 Fall City</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98025 Hobart</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98027 Issaquah</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98028 Kenmore</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98029 Issaquah</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98030 Kent</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98031 Kent</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98032 Kent</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98033 Maple Valley</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98034 Madina</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98035 Mercer Island</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98038 Bellevue</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98039 Enumclaw</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98040 Federal Way</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98041 Bothell</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98042 Covington</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98045 North Bend</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98047 Pacific</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98050 Preston</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98051 Ravensdale</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98052 Redmond</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98053 Redmond</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98054 Redando</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98055 Renton</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98056 Newcastle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98057 Renton</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98058 Renton</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98059 Newcastle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98062 Seahurst</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98063 Federal Way</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98064 Kent</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98065 Snoqualmie</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98068 Snoqualmie</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98070 Vashon</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98071 Auburn</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98072 Woodensville</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98073 Redmond</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98074 Sammamish</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98075 Issaquah</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98083 Kirkland</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98092 Auburn</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98093 Federal Way</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98101 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98102 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98103 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98104 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98105 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98106 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98107 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98108 Tukwila</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98109 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98111 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98112 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98114 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98115 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98116 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98117 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98118 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98119 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98121 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98122 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98124 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98125 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98126 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98131 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98132 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98133 Shoreline</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98134 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98136 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98138 Tukwila</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98144 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98145 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98146 Burien</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98148 Des Moines</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98154 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98155 Lake Forest Park</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98158 Seatac</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98160 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98161 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98164 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98166 Burien</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98168 Seatac</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98171 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98174 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98177 Shoreline</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98178 Tukwila</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98188 Tukwila</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98198 Des Moines</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98199 Seattle</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98224 Baring</a></li>
<li><a href="#"><i class="fa fa-file-pdf-o"></i> 98288 Skykomish</a></li>
</ul>
</nav>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment