0

我有显示来自 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

4

1 回答 1

0

移动您的代码以将 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-04T07:09:27.257 回答