Displaying JSON data on keyup

Displaying JSON data on keyup

Hey Guys. I wrote a function that displays the JSON info on a keyup event. But for some reason its just hides the data, and does not display anything when I enter text in the search bar. ( I am targeting the search bar on the $('#search').keyup(function() { )

I am not sure what I am doing wrong here... any help would be really appreciated. Thanks in advance!

Below is my script followed by the HTML content.

  1. $('#search').keyup(function() {

    $.getJSON('../data.json', function(data) {
         var output = '<ul class= "searchresults">';
         $.each(data, function (key, val){
             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);
    });//end of $.getJSON

        });// End of $("search)
       
















  1. <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="mystyle.css" />
        </head>
        <body>
            <label id="search">Live Search</label>
            <p>Enter the name or info about the speaker </p>
            <div id="searcharea">
                <input type="search" name="search" value="search" placeholder="name or info">
            </div>
            <div id="update"></div>
            <script src="../jquery.js"></script>
            <script src="script.js"></script>
        </body>
    </html>