Live search
Jump to navigation
Jump to search
Create a search where content is loaded dynamically as you type
Jquery
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Live Search</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div id="searcharea">
<label for="search">Live Search</label>
<p>Enter a Name or info about a speaker</p>
<input type="search" name="search" id="search" placeholder="Name or Info">
</div>
<div id="update"></div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('data.json', function(data) {
var output = '<ul class="searchresults">';
$.each(data, function(key, val) {
if ((val.name.search(myExp) != -1) || (val.bio.search(myExp) != -1)) {
output += '<li>';
output += '<h2>' + val.name + '</h2>';
output += '<img src="images/' + val.shortname + '_tn.jpg "alt="' + val.name + '"/>';
output += '<p>' + val.bio + '</p>';
output += '</li>';
};
});
output += '</ul>';
$('#update').html(output);
}) // get json
}); // bind to the search field
CSS
body {
background: #dad7c7;
}
#searcharea {
margin: 0 auto;
text-align: center;
background: #bf996b;
width: 30%;
padding: 10px;
border-right: 10px 10px 0 0;
}
#searcharea label {
font: bold 1.3em Arial;
text-transform: uppercase;
padding-bottom: 5px;
color: #a61c1c;
}
#searcharea p {
margin: 0;
line-height: 1em;
padding-bottom: 5px;
}
#searcharea input {
width: 80%;
text-align: center;
}
#update {
font-family: Georgia, "Times New Roman", Times, serif;
width: 70%;
margin: 0 auto;
border-top: 1px dotted #ccc;
}
#update ul {
list-style: none;
margin: 0;
padding: 0;
}
#update ul li {
width: 100%;
padding: 0 20px;
background: #eee;
padding-bottom: 10px;
height: 55px;
overflow: hidden;
border-bottom: 1px dotted #ccc;
-webkit-animation: myanim 1s;
animation: myanim 1s;
transition: height 0.3s ease-out 0.3s;
}
#update li:hover {
background: #fffce5;
min-height: 110px;
height: 250px;
overflow: visible;
}
#update h2 {
margin: 0;
padding: 0;
padding-top: 25px;
padding-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
color: #bf5841;
border-bottom: 1px dotted #ccc;
margin-bottom: 10px;
}
#update img {
float: left;
width: 80px;
margin-right: 10px;
border-radius: 10px;
}
@-webkit-keyframes myanim {
0% {
opacity: 0.3;
}
100% {
opacity: 1.0;
}
}
@keyframes myanim {
0% {
opacity: 0.3;
}
100% {
opacity: 1.0;
}
}