Question

我有一个使用PHP解析过的JSON文件。我获取JSON数据并将其输出到表中。下面是输出结果的截图：

Hosted by imgur.com

我想要完成的是让用户输入房间号码，按＆＃34; SEARCH＆＃34;然后让表格中的数据自动滚动到用户输入的任何房间号码。

以下是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，我希望能够实现这一目标。我采取的步骤如下：

我尝试将action的{{1}}更改为form，然后编写<action='<?=$_SERVER['PHP_SELF']?>语句，尝试将表单中的文本与{{1}匹配但这根本不起作用......说实话，我甚至不确定我是否正确地做到了。任何帮助，将不胜感激。

Answer 1

您不需要将表单发送到服务器。只需使表中每个房间行的id唯一（例如＃room_104，＃room_105）并使用javascript（示例中为jQuery）处理表单提交：

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

Answer 2

您可能会这样做：

在你的输出中每行添加一个类E.G

   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);
    });

});

我没有对此进行测试，但在网站上使用了类似的东西

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

2 个答案: