創建一個搜索框，在同一頁上返回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結果

回答

相關問題