输入字段区域未显示预先输入建议

>我正在使用Typeahead JS进行自动建议。Firebug 响应结果正常，但结果未显示在输入字段区域。有人帮忙吗？

网页代码

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
        <script>
        $(document).ready(function () {
            $('input#username').typeahead({
                name: 'username',
                remote: 'search.php?key=%QUERY',
                minLength: 1, // send AJAX request only after user type in at least 3 characters
                limit: 12, // limit to show only 10 results
                highlight: true
            });
        });
        </script>
    </head>
    <body>
        <form id="searchmark" class=""  method="POST">
            <input type="text" id="username" name="username" autocomplete="off" spellcheck="false" class="typeahead-devs"  placeholder="Type name">
            <input type="submit" name="submit" id="submit" value="Search">
        </form>
    </body>
</html>

PHP代码

<?php
include_once '../Controller/DbHelper.php';
$db = new DbHelper();
//$key= $_GET['key'];
$key = $_REQUEST['key'];
// do query 
$query = "SELECT user_name FROM national_certificate WHERE  user_name LIKE :user_name";
$stmt = $db->con->prepare($query);
$stmt->bindValue(':user_name', '%' . $key . '%');
$stmt->execute();
foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
    $result[] = $row["user_name"];
}
echo json_encode($result);
?>

火虫响应结果（如果我键入 ra）

["拉塞尔·马哈茂德"，"苏拉夫·保罗"，"拉希德"，"萨姆拉特"，"拉赫曼"]

$(document).ready(function () {
    $('input#username').typeahead({
        name: '#username',
        remote: 'search.php?key=%QUERY',
        minLength: 1, // send AJAX request only after user type in at least 3 characters
        limit: 12, // limit to show only 10 results
        highlight: true
    });
});

请尝试此操作，"#username"确保您具有带有"#"的ID名称。

相关内容

最新更新

热门标签：