doulu5109 2014-10-01 20:20
浏览 36

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

I have a JSON file that I have parsed using PHP. I take the JSON data and output it into a table. Below is a screenshot of what the output looks like:

What I'm trying to accomplish is for a user to enter the room number, press "SEARCH" and then have the data in the table auto scroll to whatever room number the user entered.

Here is what the JSON data looks like:

 "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"

And here is my code, that parses the JSON file, and outputs it into a table.

<?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>

You'll notice in my code above that I have a form where I'd like to make this happen. The steps that I have taken are as follows:

  1. I have tried changing the action of the form, to <action='<?=$_SERVER['PHP_SELF']?> and then writing an if statement that attempts to match the text from the form to $info['room_number'];but that didn't work at all... To be honest, I'm not even sure if I am doing it correctly. Any help would be appreciated.
  • 写回答

2条回答 默认 最新

  • duanpi5733 2014-10-01 20:31
    关注

    You don't need to send the form to the server. Just make the id of each room row in the table unique (for example #room_104, #room_105) and handle the form submit with javascript (jQuery in the example):

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

报告相同问题？

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。