Question

我尝试使用jQuery进行即时搜索。它一直正常工作，直到我点击搜索按钮。当我单击搜索按钮时，页面将重新加载，结果将消失。

这是我的代码：

的search.php

<div id="search-container">
    <form action="search.php" method="POST">
        <input type="text" name="key" id="key" placeholder="search" onkeydown="searchIt();"></input>
        <input type="submit" name="search" id="search" value="search"></input>
    </form>
</div>
<div id="res-container"></div>

脚本是：

<script type="text/javascript">
    function searchIt(){
        var text = $("input[name='key']").val();
        text = text.trim();
        if(text.length>3){
            $.post("query.php",{index: text}, function(data){
                $("#res-container").html(data);
            });
        }
    }       
</script>

query.php

if(isset($_POST['index'])){
$key = mysqli_real_escape_string($con, $_POST['index']);        
$key = trim($key);
$result = "";
if(!empty($key)){
    $query = "SELECT * FROM users WHERE first_name LIKE '%$key%' OR  last_name LIKE '%$key%'";
    $query_run = mysqli_query($con, $query);
    $row_count = mysqli_num_rows($query_run);

    if($row_count == 0){
        $result = "No results!!!";
    }else{
         while($query_row = mysqli_fetch_array($query_run)){
            $fname = $query_row['first_name'];
            $lname = $query_row['last_name'];
            $name = $fname.' '.$lname;      

            $mail = $query_row['email_id'];
            $id = $query_row['emp_id'];

            $result .="<div class=\"qitems\"><div class=\"name\"><a href=\"\">$name</a></div><div class=\"mail\">$mail</div></div>";
        }
    }
  }else{
    $result = 'please enter a word';
}
}
echo ($result);

直到这种情况正常，但当我尝试点击搜索按钮时，结果会消失。

我尝试在脚本中添加它：

 $(document).ready(function(){
        $("input[name='search']").click(searchIt());
});

但没有变化。请帮帮我。

Answer 1

这应该有效：

 $(document).ready(function(){
     $('body').on('click', 'input[name="search"]', function(event)
     {
            event.preventDefault(); // This is important, since you are interacting with a valid html form/element
            searchIt();
     });
});

更新

我为你做了一个codepen。看看它，它完美无缺： http://codepen.io/dschu/pen/VmRJPZ

Answer 2

原因是“提交”类型的按钮有效地提交页面以形成URL，这是同一页面，因此具有相同的效果，如重新加载， - 这是您的“重置”行为。除了上面的解决方案，您还可以将输入类型从<p>更改为submit，这将避免提交表单（并手动阻止事件）。

搜索按钮无法使用jQuery进行即时搜索

2 个答案: