javascript - 使用 ajax 和查询进行实时搜索引导

Question

我和一些伙伴一直在尝试在我们的搜索栏上制作一个实时搜索脚本。现在进展不顺利，所以现在我们请求您的帮助!

我们获取结果的外部文件是这样的:

$con = mysqli_connect('localhost', '*', '*', '*');

$key=$_POST['search'];

$query = ("select name, url from search where name LIKE '%{$key}%'");
$sql = $con->query($query);

while($row = $sql->fetch_array()){
    echo json_encode($row);
}

我们的脚本代码如下所示:

        <script>

    $(document).ready(function(){

$( "#formGroupInputLarge" ).keyup(function() {
  console.log( "Handler for .keyup() called." )
        var string = $('#formGroupInputLarge').val();
            $.ajax(
                {
                    type: 'POST',
                    url: 'search.php',
                    data: {'search': string},
                    success: function(data){
                        var text= JSON.parse(data);
            $("#suggesstion-box").show();
            $("#suggesstion-box").html("<a href='#'>"+ text +"</a>");
            $("#search-box").css("background","#FFF");
        }
                }
            );
        }); 

    });
    </script>

我们已经尝试了很多东西，比如下一个:

<script>

$(document).ready(function () {

    $("#formGroupInputLarge").keyup(function () {
        console.log("Handler for .keyup() called.");
        var string = $('#formGroupInputLarge').val();
        $.ajax(
            {
                type: 'POST',
                url: 'search.php',
                data: {'search': string},
                success: function (data) {

                    var obj = eval('('+ data +')' );
                    console.log(obj['name']);
                    //var text = JSON.parse(data);
                    //$("#suggesstion-box").show();
                    //$("#suggesstion-box").html(text);
                    //$("#search-box").css("background", "#FFF");
                }
            }
        );
    });

});

</script>

但似乎都不起作用。请帮助我们!

Answer 1

您的代码中可能有很多错误!您需要提供有关每个部分的行为方式(错误消息等)的更多信息。

检查这个以更好地了解一切如何与 AJAX 一起工作，以及漂亮而简单的示例 http://www.w3schools.com/php/php_ajax_intro.asp