即时搜索不起作用

The code below was for instant search, such as google search.

Note that I didn't include the connect to database function here. Coz I think the database username and password setting would be different to yours.So please create your own if you want to test it. The mysql is set with a table is called "objects", and it has one column named "name".

whenever I type in anything, another new search box pop up, where I was expecting the search result.

Could anyone help PLEASE! I stuck on this for almost a day and need it working by tomorrow.. Thanks in advance!!

<!-- display the search area -->
<html>
<!-- google API reference -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- my own script for search function -->

<center>
<form method="POST">
    <input type="text" name="search" style="width:400px " placeholder="Search box" onkeydown="searchq();">
    <input type="submit" value=">>">
    <div id="output">
    </div>
</form>
</center>
</html>

<?php
$output="";
if(isset($_POST["searchVal"])){
    //get the search
    $search=$_POST["searchVal"];
    //sort the search
    $search=preg_replace("#[^0-9a-z]#i","",$search);
    //query the search
    $query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%'") or die("could not search!");
    $count=mysqli_num_rows($query);
    //sort the result
    if($count==0){
        $output="there was no search result";
    }
    else{
        while($row=mysqli_fetch_assoc($query)){

            $object_name=$row["name"];

            $output.="<div>".$object_name."</div>";
        }
    }
}


?>
  <!-- instant search function -->
 <script type="text/javascript">
function searchq(){
    // get the value
    var searchTxt = $("input[name='search']").val();
    // post the value
    $.post("search.php",{searchVal: searchTxt},function(output){
        $("#output").html(output);
    });
}

</script>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

dongshuan8722 2015-08-29 03:39

关注

You need to change onkeydown event to onkeyup event because onkeydown event will not capture current key which is pressed in search result. I have modified your code as below which is working. Please try:

HTML Code:

<html>
<!-- google API reference -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- my own script for search function -->

<center>
<form method="POST">
    <input type="text" name="search" style="width:400px " placeholder="Search box" onkeyup="searchq();">
    <input type="submit" value=">>">
    <div id="output">
    </div>
</form>
</center>   

  <!-- instant search function -->
 <script type="text/javascript">
function searchq(){
    // get the value
    var searchTxt = $("input[name='search']").val();
    // post the value
    if(searchTxt != "")
    {
        $.post("search.php",{searchVal: searchTxt},function(output){
            $("#output").html(output);
        });
    }
    else
    {
        $("#output").html("");
    }
}
</script>
</html>

PHP file (search.php)

<?php
print_r($_POST);
$output="";
if(isset($_POST["searchVal"])){
    //get the search
    $search=$_POST["searchVal"];
    //sort the search
    $search=preg_replace("#[^0-9a-z]#i","",$search);
    //query the search
    echo "<br/>SELECT * from objects WHERE name LIKE '%$search%'<br/>";
    $query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%'") or die("could not search!");
    $count=mysqli_num_rows($query);
    //sort the result
    if($count==0){
        $output="there was no search result";
    }
    else{
        while($row=mysqli_fetch_assoc($query)){

            $object_name=$row["name"];

            $output.="<div>".$object_name."</div>";
        }
    }
    echo $output;
}
?>

I am printing what is passed to search.php and query fired in db for debug purpose. Please let me know if any further help required.

本回答被题主选为最佳回答 , 对您是否有帮助呢?