使用回車鍵代替點擊鏈接來更新搜索頁面

Question

我有一個部分供用戶使用三種不同的過濾器來搜索數據庫以獲取已輸入的提示。我目前有一個按鈕，調用一個JavaScript函數，將信息拉出並顯示在正確的div中。它以我想要的方式工作，但由於我沒有使用表單，因此我必須單擊「更新」按鈕才能刷新結果div，而不必按鍵盤上的回車鍵。我希望能夠使用回車鍵來更新結果，但我不想用郵寄或獲取數據刷新頁面。用戶需要能夠使用後退鍵才能進入前一頁。我只是學習JavaScript，所以我不確定最好的方式來做到這一點。

這裏是我的代碼：

<script> 
    $(function() 
    { 
     $("#category").change(function() 
     { 
      $("#systemType").load("/tech/tips/_inc/tech_tip_find_system.php?category=" + $("#category").val()); 
     }); 
    }); 

    function searchTips() 
    { 
     $("#showTips").load("/tech/tips/_inc/search_tips.php?category=" + $("#category").val() + "&system=" + $("#system").val() + "&search=" + $("#search").val()); 
    } 
</script> 

<div class="filterTips"> 
    <h4>Filters:</h4> 
    <select name="category" id="category"> 
     <option value="all">All Categories</option> 
     <option value="phones">Phones</option> 
     <option value="bells">Bells/Clocks</option> 
     <option value="security">Security</option> 
     <option value="tpac">Telepacific</option> 
    </select> 
    <div id="systemType"><input type="text" id="system" name="system" readonly="readonly" /></div> 
    <input type="text" id="search" name="search" placeholder="Search Tech Tips" /> 
    <button onclick="searchTips()">Update</button> 
    <div class="clear"></div> 
</div> 
<div class="showTips" id="showTips"> 
    <?php include '_inc/search_tips.php'; ?> 
</div> 
<div class="filterTips"><br />&nbsp;</div> 

我知道我應該使用形式與選擇和輸入標籤，但具有頁面重新加載是不是一種選擇。

Answer 1

你必須使用AJAX用於獲取記錄而無需刷新頁面..我這裏是答案按下回車鍵：

$("#search").keypress(function(event) { 
    if (event.which == 13) { 
     $("#showTips").load("/tech/tips/_inc/search_tips.php?category=" + $("#category").val() + "&system=" + $("#system").val() + "&search=" + $("#search").val()); 
    }}); 

這裏是AJAX的例子： http://api.jquery.com/jquery.post/

$("#search").keypress(function(event) { 
    url = "/tech/tips/_inc/search_tips.php?category=" + $("#category").val() + "&system=" + $("#system").val() + "&search=" + $("#search").val() ; 
    if (event.which == 13) { 
    $.post(url, function(data) { 
     $("#showTips").html(data); 
    }); 
    } 
});