在控制台中获取所有html尝试使用自动完成的ajax调用

时间:2017-06-10 18:21:40

标签: php jquery ajax

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Language" content="en-us">
    <title>PHP MySQL Typeahead Autocomplete</title>
    <meta charset="utf-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

 </head>

 <body>

        <script type="text/javascript">

                $(function() {
                    /*$( "#skills" ).autocomplete({
                        source: 'singleton.php'
                    });*/
                    $("#skills").keyup(function(){
                        $.ajax({
                            type: 'post',
                            url: 'singleton.php/',
                            data: 'term='+$(this).val(),
                            success: function(success){
                                $("#suggesstion-box").html(data);
                            },
                            error: function(error){
                                console.log("error");
                            }
                        })
                    })
                });
                </script>

        </script>

<?php
/*include_once('connection.php');

$conn = new Database();*/

$hostname = "localhost";
$username = "root";
$password = "";
$databasae = "employee";
if(isset($_POST['term'])){
    $query = $_POST['term'];   

 $db = new mysqli($hostname,$username,$password,$databasae);

    //get search term
    $searchTerm = $_POST['term'];

    //get matched data from skills table
    $query = $db->query("SELECT * FROM city WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['name'];
    }

    //return json data
    echo json_encode($data);
}


?>
<div class="ui-widget">
        Enter City Name: 

        <input type="text" name="city" class="city" id="skills" placeholder="Enter City Name" id="city">
            <div id="suggesstion-box"></div>

        </div>
 </body>

</html>

我在网络中获得了正确的值,但它没有在建议框div中填充数据。

我无法弄清楚我在哪里犯错。

1 个答案:

答案 0 :(得分:0)

您是否可能意外更换了数据&#39;成功&#39;在成功&#39;回调?

                    $("#skills").keyup(function(){
                        $.ajax({
                            type: 'post',
                            url: 'singleton.php/',
                            data: 'term='+$(this).val(),
                            success: function(success){
                                $("#suggesstion-box").html(data);
                            },
                            error: function(error){
                                console.log("error");
                            }
                        })
                    })

应该

success: function(data) {
    $("#suggesstion-box").html(data);
}