title: jquery not fetching results from json based on search input?
body: <p>I have the working code which displays all the results from the json, I tweaked the code to display only the results based on the search, But i don't know what is the problem is, it still shows all the results, </p>
  
  <p>The code is following:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;jQuery PHP Json Response&lt;/title&gt;
  &lt;style type="text/css"&gt;
  div
  {
  text-align:center;
  padding:10px;
  }
  
  #msg {
  width: 500px;
  margin: 0px auto;
  }
  .members {
  width: 500px ;
  background-color: beige;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="text" id="search-json-input" /&gt;
  &lt;input type="button" id="search-json-submit" value="search" /&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;input type="button" name="next" id="next" value="NEXT" /&gt;
  &lt;br/&gt;
  &lt;input type="button" name="previous" id="previous" value="PREV" /&gt;
  &lt;br/&gt;
  &lt;div id="msg"&gt;
      &lt;table id="userdata" border="1"&gt;
          &lt;thead&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Sex&lt;/th&gt;
              &lt;th&gt;Location&lt;/th&gt;
              &lt;th&gt;Picture&lt;/th&gt;
              &lt;th&gt;audio&lt;/th&gt;
              &lt;th&gt;video&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var users = [];
  var idx = 0; 
  
  var url = "json.php";
      var search_query = jQuery('#search-json-input').val();
      var search_query_regex = new RegExp(".*"+search_query+".*", "g");
  $.getJSON(url, function (data) {
  
      users = data.members;
  
      renderRow(idx);
      $('#next').click(function() {
          idx++;
          renderRow(idx);
      });
      $('#previous').click(function() {
          idx--;
          renderRow(idx);
      });
  });
  
  $("#search-json-submit").click(function(){
  
  
      for(var y=0;y&lt;users.length;y++){ 
      if((users[y].email).match(search_query_regex) ||
             (users[y].sex).match(search_query_regex) ||
     (users[y].location).match(search_query_regex)) {
  
          renderRow(y)
  
          }
       }
  });
  
  var renderRow = function (idx) {
      //alert(idx);
      if (idx &lt; 0) idx = 0;
      if (idx &gt; (users.length - 1)) idx = (users.length - 1);
      var user = users[idx];
  
      var tblRow = "&lt;tr&gt;" + "&lt;td&gt;" + user.email + "&lt;/td&gt;" + "&lt;td&gt;" + user.sex + "&lt;/td&gt;" + "&lt;td&gt;" + user.location + "&lt;/td&gt;" + "&lt;td&gt;" + "&lt;img src=" + user.image + "&gt;" + "&lt;/td&gt;" + "&lt;td&gt;" + "&lt;audio src=" + user.video + " controls&gt;" + "&lt;/td&gt;" + "&lt;td&gt;" + "&lt;video src=" + user.video + " controls&gt;" + "&lt;/td&gt;" + "&lt;/tr&gt;";
      $('#userdata tbody').html(tblRow);
  
  
  };
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The result of json.php can be seen here: <a href="http://sco7.com/components/phonegap/json.php" rel="nofollow">http://sco7.com/components/phonegap/json.php</a></p>