1

我想做的是，我有一个输入字段。在输入字段中输入内容后，如果向输出 json 的 php 文件发送请求，我想要的是根据搜索字段中的输入从 json 中获取结果。

索引.html 

<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="divuseriemail"></div>
<div id="divusersex"></div>
<div id="divuserlocation"></div>
<div id="divuserimage"></div>
<div id="divuseraudio"></div>
<div id="divuservideo"></div>


<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++){ 
        //console.log(users[y]);
        if((users[y].email).match(search_query_regex) ||
            (users[y].sex).match(search_query_regex) ||
            (users[y].location).match(search_query_regex)) 
        {
            //console.log(users[y].email);
            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 email = user.email;
    $('#divuseremail').html(email);
    var sex = user.sex;
    $('#divusersex').html(sex);
    var location = user.location;
    $('#divuserlocation').html(location);
    var image = "<img src=" + user.image + ">";
    $('#divuserimage').html(image);
    var audio = "<audio src=" + user.video + " controls>";
    $('#divuseraudio').html(audio);
    var video = "<video src=" + user.video + " controls>";
    $('#divuservideo').html(video);
};

</script>

json输出：http ://sco7.com/components/phonegap/json.php

4

3 回答 3

3

.val()每次搜索该框时，您都不会获得输入字段的 。您需要在每次执行搜索时重新填充search_queryand ，否则您将只使用输入字段的原始值进行搜索 - 显然，它是一个空字符串。search_query_regex

试试这个：

$("#search-json-submit").click(function(){

    // re-populate variables

    search_query = jQuery('#search-json-input').val();
    search_query_regex = new RegExp(".*"+search_query+".*", "g");

    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)) 
        {
            console.log(users[y].email);
            renderRow(y)
        }
     }
});

无论是否成功匹配，视觉反馈都无济于事。只有当搜索成功时，您最好向成员提供反馈。但这只是一个用户体验问题，我相信你知道。

于 2013-08-05T11:06:15.010 回答
1

我可以建议你测试你的 .match 吗，像这样

var lookAtMeWithTheDebugger = users[y].email.match(search_query_regex);
    lookAtMeWithTheDebugger = users[y].sex.match(search_query_regex);
    lookAtMeWithTheDebugger = users[y].location.match(search_query_regex);

在第一行放置一个断点并检查每个 .match 返回的内容以查看哪个测试导致问题。

您确实意识到这些匹配项都将返回一个数组。这可能是一个更好的测试。

删除“g”选项，因为我假设您只是想知道字符串是否出现而不是出现多少次。然后试试这个作为测试，如果没有找到 .match() 返回 null。

if( users[y].email.match(search_query_regex) != null ||
    users[y].sex.match(search_query_regex) != null   ||
    users[y].location.match(search_query_regex) != null) 
{

我希望这会引导您找到解决方案。

于 2013-08-05T11:02:58.407 回答
0

我对我的代码进行了一些更改，现在一切正常。

这是工作代码：

<!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="divuseriemail"></div>
<div id="divusersex"></div>
<div id="divuserlocation"></div>
<div id="divuserimage"></div>
<div id="divuseraudio"></div>
<div id="divuservideo"></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";

$.getJSON(url, function (data) {
    users = data.members;
    renderRow(idx);
    $('#next').click(function() {
        idx++;
        if (idx > (users.length - 1)) idx = (users.length - 1);
        renderRow(idx);
    });
    $('#previous').click(function() {
        idx--;
        if (idx < 0) idx = 0;
        renderRow(idx);
    });
});

$("#search-json-submit").click(function(){

        var search_query = jQuery('#search-json-input').val();
    var search_query_regex = new RegExp(".*"+search_query+".*", "g");


    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];

        console.log(user);
 var email = user.email;
   $('#divuseremail').html(email);
    var sex = user.sex;
    $('#divusersex').html(sex);
    var location = user.location;
    $('#divuserlocation').html(location);
    var image = "<img src=" + user.image + ">";
    $('#divuserimage').html(image);
    var audio = "<audio src=" + user.video + " controls>";
    $('#divuseraudio').html(audio);
    var video = "<video src=" + user.video + " controls>";
    $('#divuservideo').html(video);



};

</script>
</body>
</html>
于 2013-08-06T06:45:18.717 回答