JQuery 即时搜索：如何进行第二次发布请求。以及如何使用回车键进行搜索答案

【问题标题】：JQuery instant search: how to make a second post request. and how to make a use enter key to searchJQuery 即时搜索：如何进行第二次发布请求。以及如何使用回车键进行搜索
【发布时间】：2015-09-05 18:27:48
【问题描述】：

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

第一季度。使用搜索函数 searchq() 发布到 search.php 然后打印出返回的结果工作正常，但是 create_object.php 无法获取变量 txt （已成功发布到 search.php），关于如何的任何想法要解决这个问题？第二季度我想创建一个函数，当按下回车键时，允许用户被引导到第一个搜索结果（用 url 锚定），知道如何实现吗？我尝试了一些方法，但很快就演变成一场混乱的噩梦。

请注意，我没有在此处包含连接到数据库的功能。因为我认为数据库用户名和密码设置会与你的不同。所以请在 search.php 中创建你自己的来测试它。 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",{createVal: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】：

我刚刚对您的 HTML 做了一个简单的更改。我删除了onkeyup attr，并添加了一个id，以便拥有更简单的 jQuery 选择器

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

<script>
    $(document).ready(function() {

        var request;

        $("#search").on("keyup", function(e) {

            if(e.which === 13) {
                // Q2 -> Enter pressed
                var firstResult = $("#output").find("a").first();
                if(firstResult.length === 1) { // Just checking there is a result
                    window.location = firstResult.attr("href");
                }
                return false; // This prevents the form to submit
            } else {
                // Any other key
                searchq();
            }

        });

    });
</script>

更新

您无法从createq 函数访问txt var 的原因是因为它是searchq 函数的本地变量，这意味着在searchq 函数之外它根本不存在.

最简单的解决方案是这样做：

var txt;
function searchq() {
    // Some code here
    // Use txt, not var txt
}
function createq() {
    // Some code here
    // Use txt, not var txt
}

新更新

在searchq()你使用

$("#search_output")

但应该是的

$("#output")

您还在search.php 中打印格式错误的 HTML 代码。应该是这样的

$output.="<div><a href='##'>".$object_name."</a></div>";
// Note the missing > in the <a> tag

【讨论】：

第一季度。我试过了，搜索功能甚至停止工作。您可以尝试在不更改 html 属性的情况下执行此操作，因此搜索功能至少可以工作。 Q2 我尝试将变量 txt 设为全局变量，createq 函数确实获取了该变量，并使用警报函数对其进行了测试。但是php文件还是拿不到，能不能写个post函数代码，把txt贴到create_object.php，不带回调函数。（我没有使用 var txt）。
@pokemonking 刚刚根据您的评论编辑了答案。没有回调的$.post 工作得很好。

【解决方案2】：

我对PHP不是很熟悉，所以无法测试实际场景。但就 javascript 代码而言，请在最后检查以下内容：

Q1：您可能将函数名称“createq”拼错为“creatq”

    ... <div id=\"create\" onclick=\"creatq() ...
    ..
    ..
    function createq(){
    ..
    }

Q2 键盘上的每个键都有一个键码。对于回车键，其值为13。您可以通过在任何事件处理函数中使用event.which 来获取它。
在这种情况下，它可以在输入字段的keyup or keypress 上获取，如下所示：

$(document).on('keyup keypress', 'input[name=search]', function(evt) {
    if (evt.which === 13) {
       // find the first search result in DOM and trigger a click event 
       // $("#search_output").find('a').first().trigger('click');


      // OR
      // find the url of the 1st link and use document.location to redirect 
      var redirectUrl = $('#search_output').find('a').first().attr('href');
      document.location = redirectUrl;
    }
});

【讨论】：

您是否尝试过触发链接点击的部分？我不认为现代浏览器会跟随链接..（在 Chrome 45.0.2454.85 中为 Ubuntu 测试）
我改了错别字和上面的代码，警报测试现在可以工作了，但是create_object.php仍然无法获取POST变量。
另外，对于第二季度，它不起作用。我之前尝试过类似的事情，它只是没有用..
这很奇怪，我确实在某个随机站点 [Chome(Windows)] 的控制台中尝试过，然后似乎可以正常工作。我想我必须深入挖掘它为什么不起作用，如果发现任何有趣的东西会分享。 @pokemon king 无论如何编辑了另一种方法，请重新测试。
@JoaquínO 你有任何关于为什么触发器不起作用或它有什么限制的上下文吗？