Question

我正在遵循此site来创建自动完成文本框，但是下拉菜单没有出现在texbox下方，而是在浏览器的左上方显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
    <script src="jquery-ui/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $("#skill_input").autocomplete({
                source: "search.php",
            });
        });
        
    </script>

</head>
<body>
        <label>Your skills:</label>
        <input type="text" id="skill_input" placeholder="Start Typin"/><br>
</body>

</html>

Answer 1

我认为您需要在示例中添加这些脚本和CSS。

看起来您使用的是不同的

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- jQuery UI library -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

自动完成文本框的下拉列表未出现在texbox下方

1 个答案: