title: Search box for JSON data
body: <p>I created this code to search through my JSON data but I haven't a clue why it doesn't work. Could anyone please analyse it?</p>
  
  <p>I basically need a HTML search box to search through corresponding JSON data and return it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
    $('#txt-search').keyup(function(){
      var searchField;
      $.getJSON('example.json', function(data) { 
        searchField = data.val();
      });
      if(searchField === '')  {
        $('#filter-records').html('');
      return;
    }
    var regex = new RegExp(searchField, "i");
    var output = '&lt;div class="row"&gt;';
    var count = 1;
    $.each(data, function(key, val){
    if ((val.employee_salary.search(regex) != -1) || (val.employee_name.search(regex) != -1)) {
      output += '&lt;div class="col-md-6 well"&gt;';
      output += '&lt;div class="col-md-3"&gt;&lt;img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /&gt;&lt;/div&gt;';
      output += '&lt;div class="col-md-7"&gt;';
      output += '&lt;h5&gt;' + val.employee_name + '&lt;/h5&gt;';
      output += '&lt;p&gt;' + val.employee_salary + '&lt;/p&gt;'
      output += '&lt;/div&gt;';
      output += '&lt;/div&gt;';
      if(count%2 == 0){
        output += '&lt;/div&gt;&lt;div class="row"&gt;'
      }
      count++;
    }
      });
      output += '&lt;/div&gt;';
      $('#filter-records').html(output);
          });
    &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Request JSON Test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class="container" style="padding:50px 250px;"&gt;
    &lt;form role="form"&gt;
      &lt;div class="form-group"&gt;
        &lt;input type="input" class="form-control input-lg" id="txt-search" placeholder="Type your search character"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
    &lt;div id="filter-records"&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>