Live search with Ajax and JSON is not working on Plunker!

Discussion in 'JavaScript' started by kayut, Jan 20, 2017.

0
  1. #1
    Hi,

    I'm trying to test a live search using JSON and Ajax on Plunker.
    However the code doesn't work!
    Is anything wrong with my code or Plunker isn't able to handle Ajax requests?

    Here is my example
    http://plnkr.co/edit/ZkXMcRsHCuYg4axN5DL8?p=preview

    Thanks
     
    kayut, Jan 20, 2017 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #2
    Hi

    A few things
    • use console.log to output values from your javascript so that you can see what is running and what isn't.
    • Jquery events shoudl be run using ".on"
    • your .each needs to search the speakers array in the json -not the json itself
    • it's probably really old school but I never name variables with words that might be protected so I changed "search" to "searchbox"
    console.log('Loading script.js');

$('#searchbox').on('keyup', function() {
  console.log('beginning search');
  var searchVal = $('#searchbox').val();
  var myExp = new RegExp(searchVal, "i");

    $.getJSON('data.json', function(data) {
        var output = '<ul class="searchresults">';
        $.each(data.speakers, 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
});
    Code (markup):
    then in the html itself it's a good idea to load your custom code after the page itself has loaded to ensure that jquery is ready and the elements you are going to listen to exist

    <!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>Live Search</h1>

  <div id="searcharea">
    <form>
      <label for="searchbox">live search</label>
      <p>Enter the name or info about a speaker</p>
      <input type="search" name="searchbox" id="searchbox" placeholder="name or info" />
    </form>
  </div>

  <div id="update"></div>
  <script type='text/javascript'>
    $.getScript("script.js", function(data, textStatus, jqxhr) {
      console.log("script.js has been loaded");
    });
  </script>
</body>

</html>
    Code (markup):
     
    sarahk, Jan 20, 2017 IP