JQuery：将变量发布到第二个文件，当按下回车键时，网络将引导我到第一个搜索结果页面答案

【问题标题】：JQuery: Post variable to the second file, and when the enter key pressed, the web will direct me to the first search result pageJQuery：将变量发布到第二个文件，当按下回车键时，网络将引导我到第一个搜索结果页面
【发布时间】：2015-09-05 19:58:50
【问题描述】：

我使用 JQuery 创建了一个类似于 google 搜索的即时搜索。

第一季度。使用搜索函数 searchq() 到 search.php 的帖子然后打印出返回的结果工作正常，但是 createq() 函数根本不起作用，当我使用 alert() 进行测试时它没有触发，任何想法关于如何修复它，以便可以将变量 txt 发布到 create_object.php（已成功发布到 search.php）。

第二季度我想创建一个函数，允许用户在按下回车键时定向到第一个搜索结果（用 url 锚定），知道如何实现这一点吗？我尝试了一些东西，但它搞砸了。

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

提前致谢！

 <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 txt = $("input").val();
            // post the value
            if(txt){
                $.post("search.php", {searchVal: txt}, function(result){
                    $("#search_output").html(result+"<div id=\"create\" onclick=\"creatq()\"><br>Not found above? Create.</div>");
                });
            }
            else{
                $("#search_output").html("");
            }


        };
function createq(){
    // allert for test purpose
    alert("hi");
    $.post( "create_object.php",{creatVal:txt} );

}

</script>
    </html>

PHP 文件 (search.php)

 <?php
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><a href='##'".$object_name."</a></div>";
        }
    }
    echo $output;
}
?>

php 文件 (create_object.php)

 <?php
    if(isset($_POST["createVal"])){
        $name=$_POST["createVal"];
        var_dump($name);

    }

?>

【问题讨论】：

标签： javascript php jquery search

【解决方案1】：

两个问题合二为一！

Q1：问题似乎是 onclick 函数中的拼写错误：

onclick=\"creatq()\"

应该是

onclick=\"createq()\"

Q2：按下回车键将提交表单，因此您使用提交处理程序捕捉回车键然后重定向：

$(function() { //shorthand document.ready function
    $('form ').on('submit', function(e) { //use on if jQuery 1.7+
        e.preventDefault();  //prevent form from submitting
        $url = $('#search_output div:first a').attr('href'); // find first link
        window.location.href = $url; // redirect
    });
});

（大部分工作归功于this answer）

【讨论】：