Question

我正在尝试将一个示例jQuery嵌入到我的静态网页中，该网页应该自动完成。因为这是我第一次在前端工作所以不确定我在哪里弄错了。

**由于某种原因，自动填充功能无效**

**代码**

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

<head>
<script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(function()
{
    var availableTags = 
    [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++"
    ];
    $("#tags").autocomplete({
        source: availableTags
    });
});
</script>
</head>
<body>
    <div id="centered">

        <div>
            <label for="tags"> Tags : </label>
            <input id="tags">
        </div>
    </div>
</body>
</html>

是否可以包含以下所有链接和脚本以及订单

<link rel="stylesheet" type="text/css" href="css/second_page.css" media="all"/>                                                                                                                                                                                     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>                                                                                           <script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />

Answer 1

jQuery是自动完成界面的基础库。正如所指出的，您必须在添加中将自动完成的UI库层包含到jQuery库中。因为您正在尝试使用jQuery UI库，所以还应该添加jQueryUI库所需的stylesheet。

从本质上讲，这些是您应该在页面上包含的内容：

jQuery
jQuery UI
jQuery UI CSS

以下是您修改的代码：

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

<head>
<title> Page Title </title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />


</head>
<body>
    <div id="centered">

        <div>
            <label for="tags"> Tags : </label>
            <input id="tags">
        </div>
    </div>
   <script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>


   <!-- your code -->
   <script>
$(function()
{
    var availableTags = 
    [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++"
    ];
    $("#tags").autocomplete({
        source: availableTags
    });
});
</script>

</body>
</html>

Answer 2

包含在你的html头中

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

jQuery自动完成脚本无法解析

2 个答案: