Php 使用调用json的jQuery搜索不起作用_Php_Javascript_Jquery_Json

Php 使用调用json的jQuery搜索不起作用

php javascript jquery json

Php 使用调用json的jQuery搜索不起作用,php,javascript,jquery,json,Php,Javascript,Jquery,Json,我想做的是，我有一个输入字段。如果我向输出json的php文件发送请求，在输入字段中输入一些内容后，我希望根据搜索字段中的输入从json中获取结果 index.html <input type="text" id="search-json-input" /> <input type="button" id="search-json-submit" value="search" /> <br/> <br/> <input type="butto

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

index.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>










var用户=[]；
var-idx=0；
var url=“json.php”；
var search_query=jQuery（'#search json input'）.val（）；
var search\u query\u regex=new RegExp（“.*”+search\u query+“*”，“g”）；
$.getJSON（url、函数（数据）{
用户=data.members；
renderRow（idx）；
$（“#下一步”）。单击（函数（）{
idx++；
renderRow（idx）；
});
$（“#上一个”）。单击（函数（）{
idx-；
renderRow（idx）；
});
});
$（“#搜索json提交”）。单击（函数（）{
对于（var y=0；y（users.length-1））idx=（users.length-1）；
var user=users[idx]；
var email=user.email；
$（'#divuseremail'）.html（电子邮件）；
var sex=user.sex；
$（'#divusersex'）.html（sex）；
var location=user.location；
$（'#divuserlocation'）.html（location）；
var image=“”；
$（'#divuserimage'）.html（图像）；
var audio=“
我可以建议你测试一下你的。匹配，然后像这样吗
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);

在第一行放置一个断点，并检查每个断点返回的内容。匹配以查看哪个测试导致了问题
您知道这些匹配将返回一个数组
这可能是一个更好的测试
删除“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) 
{

我希望这能引导您找到解决方案。
我可以建议您测试一下您的匹配。然后，像这样
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);

在第一行放置一个断点，并检查每个断点返回的内容。匹配以查看哪个测试导致了问题
您知道这些匹配将返回一个数组
这可能是一个更好的测试
删除“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) 
{

我希望这能引导您找到解决方案。
您没有得到.val（）每次搜索框时输入字段的
。每次执行搜索时都需要重新填充search\u query
和search\u query\u 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)
        }
     }
});

$（“#搜索json提交”）。单击（函数（）{
//重新填充变量
search_query=jQuery（'#search json input'）.val（）；
search\u query\u regex=new RegExp（“.*”+search\u query+“*”，“g”）；
对于（var y=0；y您没有得到.val（）每次搜索框时输入字段的
。每次执行搜索时都需要重新填充search\u query
和search\u query\u 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)
        }
     }
});

$（“#搜索json提交”）。单击（函数（）{
//重新填充变量
search_query=jQuery（'#search json input'）.val（）；
search\u query\u regex=new RegExp（“.*”+search\u query+“*”，“g”）；
对于（var y=0；y，我对代码做了一些更改，现在一切正常
以下是工作代码：
<!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>


jQuery PHP Json响应
div
{
文本对齐：居中；
填充：10px；
}
#味精{
宽度：500px；
保证金：0px自动；
}
.成员{
宽度：500px；
背景颜色：米色；
}








var用户=[]；
var-idx=0；
var url=“json.php”；
$.getJSON（url、函数（数据）{
用户=data.members；
renderRow（idx）；
$（“#下一步”）。单击（函数（）{
idx++；
如果（idx>（users.length-1））idx=（users.length-1）；
renderRow（idx）；
});
$（“#上一个”）。单击（函数（）{
idx-；
如果（idx<0）idx=0；
renderRow（idx）；
});
});
$（“#搜索json提交”）。单击（函数（）{
var search_query=jQuery（'#search json input'）.val（）；
var search\u query\u regex=new RegExp（“.*”+search\u query+“*”，“g”）；
对于（var y=0；y（users.length-1））idx=（users.length-1）；
var user=用户[idx]；
console.log（用户）；
var email=user.email；
$（'#divuseremail'）.html（电子邮件）；
var sex=user.sex；
$（'#divusersex'）.html（sex）；
var location=user.location；
$（'#divuserlocation'）.html（location）；
var image=“”；
$（'#divuserimage'）.html（图像）；
var audio=“”；
$（'#divuseraudio'）.html（音频）；
var video=“”；
$（'#divuservideo'）.html（视频）；
};
我对代码做了一些更改，现在一切正常
以下是工作代码：
<!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>


jQuery PHP Json响应
div
{
文本对齐：居中；
填充：10px；
}
#味精{
宽度：500px；
保证金：0px自动；
}
.成员{
宽度：500px；
背景颜色：米色；
}








var用户=[]；
var-idx=0；
var url=“json.php”；
$.getJSON（url、函数（数据）{
用户=data.members；
renderRow（idx）；
$（“#下一步”）。单击（函数（）{
idx++；
如果（idx>（users.length-1））idx=（users.length-1）；
renderRow（idx）；
});
$（“#上一个”）。单击（函数（）{
idx-；
如果（idx<0）idx=0；
renderRow（idx）；
});
});
$（“#搜索json提交”）。单击（函数（）{
var search_query=jQuery（'#search json input'）.val（）；
var search\u query\u regex=new RegExp（“.*”+search\u query+“*”，“g”）；
对于（var y=0；y（users.length-1））idx=（users.length-1）；
var user=users[idx]；
console.log（用户）；
var email=user.email；
$（'#divuseremail'）.html（电子邮件）；
var sex=user.sex；
$（“#divusersex'）.html（性别）；
var location=user.location；
$（'#divuserlocation'）.html（location）；
var image=“”；
$（'#divuserimage'）.html（图像）；
var音频