jquery不从基于搜索输入的json中获取结果？

我的工作代码显示了json的所有结果，我调整了代码以仅显示基于搜索的结果，但我不知道是什么问题，它仍然显示所有结果，jquery不从基于搜索输入的json中获取结果？

的代码如下：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery PHP Json Response</title> 
<style type="text/css"> 
div 
{ 
text-align:center; 
padding:10px; 
} 

#msg { 
width: 500px; 
margin: 0px auto; 
} 
.members { 
width: 500px ; 
background-color: beige; 
} 
</style> 
</head> 
<body> 
<input type="text" id="search-json-input" /> 
<input type="button" id="search-json-submit" value="search" /> 
<br/> 
<br/> 
<input type="button" name="next" id="next" value="NEXT" /> 
<br/> 
<input type="button" name="previous" id="previous" value="PREV" /> 
<br/> 
<div id="msg"> 
    <table id="userdata" border="1"> 
     <thead> 
      <th>Email</th> 
      <th>Sex</th> 
      <th>Location</th> 
      <th>Picture</th> 
      <th>audio</th> 
      <th>video</th> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> 
</script> 
<script type="text/javascript"> 

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<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 < 0) idx = 0; 
    if (idx > (users.length - 1)) idx = (users.length - 1); 
    var user = users[idx]; 

    var tblRow = "<tr>" + "<td>" + user.email + "</td>" + "<td>" + user.sex + "</td>" + "<td>" + user.location + "</td>" + "<td>" + "<img src=" + user.image + ">" + "</td>" + "<td>" + "<audio src=" + user.video + " controls>" + "</td>" + "<td>" + "<video src=" + user.video + " controls>" + "</td>" + "</tr>"; 
    $('#userdata tbody').html(tblRow); 


}; 

</script> 
</body> 
</html>

json.php的结果可以在这里看到：http://sco7.com/components/phonegap/json.php

来源

2013-08-04 mbaljeetsingh

不幸的是，在[JSON input]（http://sco7.com/components/phonegap/json.php）中找不到一个'search_input'。你能否提供一个带*这样的字符串的例子？ – cars10m

@ cars10我添加了完整的html文件，现在看到 – mbaljeetsingh

移动你的代码，以JSON提取到您的事件处理程序。您的代码在发生时直接执行，因此在输入框中找不到任何值。

$("#search-json-submit").click(function(){ 
    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); 
     }); 
    }); 

    //... Rest of the handler 
});

来源

2013-08-04 07:09:27 Starx

我不想这样做，因为我希望打开页面时显示所有记录（甚至在搜索任何内容之前）。 – mbaljeetsingh

jquery不从基于搜索输入的json中获取结果？

回答

相关问题