创建一个搜索框，在同一页上返回JSON结果

我有一个JSON文件，我使用PHP进行了解析。我将JSON数据输出到表中。下面是输出看起来像截图：创建一个搜索框，在同一页上返回JSON结果

Hosted by imgur.com

我试图做到的是为用户输入房间号，按“搜索”，然后在表中具有自动数据滚动到用户输入的任何房间号码。

这里是JSON数据的样子：

"apiVersion" : "0.1", 
    "data" : { 
     "roomCount" : 105, 
     "rooms" : [ 
     { 
      "room_number" : "104", 
      "services" : [ 
       { 
        "adult" : { 
        "enabled" : false 
        }, 
        "room_charges" : { 
        "enabled" : true 
        } 
       } 
      ], 
      "status" : "UNOCCUPIED" 
     }, 
     { 
      "room_number" : "105", 
      "services" : [ 
       { 
        "adult" : { 
        "enabled" : true 
        }, 
        "room_charges" : { 
        "enabled" : false 
        } 
       } 
      ], 
      "status" : "OCCUPIED"

这里是我的代码，它解析JSON文件，并输出到一个表。

<?php 
$response = file_get_contents("response.json"); 

$data = json_decode($response, true); 

?> 

<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<div> 
    <form id="response_form" action="#" method="POST" name="mainform"><br> 
     <label for="text">&nbsp;Enter Room Number</label><br> 
     <input type="text" name="response_search" id="text" rows="1" cols="47"> </textarea><br> 
     <input type="submit" value="Search"> 
    </form> 
</div> 
<div id="response_data"> 
    <table> 
     <thead> 
      <tr> 
       <th width="188px">Room Number: </th> 
       <th width="193px">Adult:</th> 
       <th width="193px">Room Charges: </th> 
       <th width="212px">Status: </th> 
      </tr> 
     </thead> 
     <tbody> 
      <?php foreach($data['data']['rooms'] as $info): ?> 
       <tr id="scroll_through"> 
        <td><?php echo $info['room_number']; ?></td> 
        <?php $services = reset($info['services']); ?> 
        <td><?php echo ($services['adult']['enabled'] == 1) ? 'ENABLED' : 'DISABLED'; ?></td>     
        <td><?php echo ($services['room_charges']['enabled'] == 1) ? 'ENABLED' : 'DISABLED'; ?></td> 
        <td><?php echo $info['status']; ?></td> 
       </tr> 
      <?php endforeach; ?> 
     </tbody> 
    </table> 
</div>

你在我的代码上面看到我有一个form这里我想做到这一点。是我所采取的步骤如下：

我曾试图改变form的action，以<action='<?=$_SERVER['PHP_SELF']?>，然后写一个if声明，试图从表单中的文本匹配$info['room_number'];但没有一切工作......说实话，我甚至不知道我是否正确地做了。任何帮助，将不胜感激。

来源

2014-10-01 ValleyDigital

您不需要将表单发送到服务器。只是要在独特的表中的每个房间行的id（例如＃room_104，＃room_105）和处理形式与JavaScript提交（jQuery的在本例中）：

$('#response_form').submit(function() { 
    window.location.hash = 'room_'+$('#text').val(); 
    return false; 
});

来源

2014-10-01 20:31:37

你可能会做这样的事情：

在输出每行加个班EG

class="room<?= $info['room_number']; ?>

然后使用jquery这样的：

//button clicked 
$("#searchBtn").click(function(event){ 

    roomNo = "room" + event.target.id; 

    $('html, body').animate({ 
     scrollTop: $('#' + roomNo).offset().top - 200 
    }, 800, function(){ 
     //This will flash the row 
     $('#' + roomNo).fadeTo('slow', 0.5).fadeTo('slow', 1.0).fadeTo('slow', 0.5).fadeTo('slow', 1.0); 
    }); 

});

我还没有测试过，但在网站上使用类似的东西

来源

2014-10-01 20:32:29 makie

创建一个搜索框，在同一页上返回JSON结果

回答

相关问题