Bacchas: Created page with "= Create a search where content is loaded dynamically as you type =
'''Jquery''' ==HTML==

         ..."

2016-12-24T21:20:03Z

Created page with "= Create a search where content is loaded dynamically as you type = <br> '''Jquery''' ==HTML== <pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />..."

New page

= Create a search where content is loaded dynamically as you type =
<br>
'''Jquery'''
==HTML==
<pre>
<!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>
</pre>

==JavaScript==
<pre>
$('#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
</pre>

==CSS==
<pre>
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;
}
}
</pre>
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]==

Live search - Revision history

Bacchas: Created page with "= Create a search where content is loaded dynamically as you type =
'''Jquery''' ==HTML==
..."

Live search - Revision history

Bacchas: Created page with "= Create a search where content is loaded dynamically as you type = '''Jquery''' ==HTML== ..."

Bacchas: Created page with "= Create a search where content is loaded dynamically as you type =
'''Jquery''' ==HTML==
..."