Live search

From rbachwiki
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;
    }
}

Back To Top- Home - Category