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

时间:2016-01-26 07:57:17

标签: javascript php jquery typeahead.js

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

Html代码

<!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 code

<?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);
?>

Firebug响应结果(如果我输入ra)

  

[“Rasel mahmud”,“Sourav paul”,“Rashed”,“Samrat”,“Rahman”]

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
 $(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>
&#13;
&#13;
&#13;

请试试这个,&#39; #username&#39;确保您的ID名称为&#39;#&#39;。