即时搜索不起作用答案

【问题标题】：instant search not working即时搜索不起作用
【发布时间】：2015-08-30 12:00:19
【问题描述】：

以下代码用于即时搜索，例如谷歌搜索。

请注意，我没有在此处包含连接到数据库功能。因为我认为数据库用户名和密码设置会与你的不同。所以如果你想测试它，请创建你自己的。 mysql设置了一个名为“objects”的表，它有一个名为“name”的列。

每当我输入任何内容时，都会弹出另一个新的搜索框，这是我期待的搜索结果。

有人可以帮忙吗？我坚持了将近一天，明天需要它工作..提前谢谢！

<!-- 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>

【问题讨论】：

你不需要 jquery 来完成这样一个简单的任务。你可以在几分钟内用纯 javascript 完成它

标签： javascript php jquery html

【解决方案1】：

您需要将onkeydown 事件更改为onkeyup 事件，因为onkeydown 事件不会捕获在搜索结果中按下的当前键。我已经修改了您的代码，如下所示。请尝试：

HTML 代码：

<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 文件 (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;
}
?>

我正在打印传递给 search.php 的内容，并在 db 中触发查询以进行调试。如果需要任何进一步的帮助，请告诉我。

【讨论】：

我已经修改了searchq() 函数来检查搜索框是否为空。如果它是空的，它将使结果空白。如果需要任何进一步的帮助，请检查并告诉我。
首先，谢谢！如何将搜索结果限制为 10 个？
要将搜索结果限制为10，您需要修改SELECT查询如下：SELECT * from objects WHERE name LIKE '%$search%' LIMIT 10请检查并让我知道是否需要进一步的帮助。谢谢。
谢谢！！我需要另外两个功能。我知道我可能有点贪婪。谢谢。我真的对javascript一无所知。首先，我在每个搜索结果上都使用了锚标签。 Q1：但是如果按下回车键如何引导我到第一个搜索结果，就像用户点击了第一个搜索结果一样？ Q2：我将javascript代码修改为 if(txt){ $.post("search.php", {searchVal: txt}, function(result){ $("#search_output").html(result+"
上面没有找到？创建。"); });但如何将 searchTxt 发布到 create_object.php ？