У меня есть рабочий код, который отображает все результаты из 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
Переместите свой код, чтобы получить 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 });