jQuery不会基于搜索输入从json获取结果? [英] jquery not fetching results from json based on search input?
本文介绍了jQuery不会基于搜索输入从json获取结果?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有可以显示json中所有结果的工作代码，我对代码进行了调整以仅基于搜索显示结果，但是我不知道这是什么问题，它仍然显示所有结果，
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,
代码如下:
<!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
The result of json.php can be seen here: http://sco7.com/components/phonegap/json.php
推荐答案
移动代码以将JSON提取到事件处理程序中.您的代码在发生时直接执行，因此在输入框上找不到任何值.
Move your code to fetch JSON into your event handler. Your code execute directly upon occurence, so it does not find any value on the input box.
$("#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
});
这篇关于jQuery不会基于搜索输入从json获取结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
