Question

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

使用回车键更新搜索页，而不是单击链接

1 个答案: