javascript - 使用回车键而不是单击链接来更新搜索页面

Question

我有一个部分供用户使用三个不同的过滤器在数据库中搜索已输入的提示。我目前有一个调用 javascript 函数的按钮，该函数提取信息并将其显示在正确的 div 中。它按照我想要的方式工作，但由于我没有使用表单，我必须单击“更新”按钮以刷新结果 div，而不是能够按键盘上的 enter。我希望能够使用 enter 键来更新结果，但我不想用 post 或获取数据来刷新页面。用户需要能够使用后退键返回上一页。我刚开始学习 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>

我知道我应该使用带有 select 和 input 标签的表单，但无法重新加载页面。

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