Question

我在JQuery中遇到自动完成问题。这是我的autoComplete.html文件：页面上显示文本字段，但在输入时不显示提示。我做错了什么？

编辑：我已经修改了@Praveen Kumar对我的代码的回答，但TextBox仍然没有显示提示。

EDIT2：问题出现在脚本链接中。而不是

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"></link>

应该有：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"></link>

现在它可以正常工作。现在我的代码看起来像这样：

       <head> 
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
    <meta name="description" content=""></meta>
    <meta name="author" content=""></meta>

    <title>Gigs Map Inserting</title>

    <!-- Bootstrap Core CSS -->
    <link href="http:/css/bootstrap.min.css" rel="stylesheet"></link>


     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"></link>
    <!-- Linki do skryptow -->

    <script>

    $(document).ready(function() {
          var availableTags = [
            "FirstOption",
            "SecondOption",
            "ThirdOption"
          ];
          $("#tags").autocomplete({
            source: availableTags
          });
        });
    </script>


    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" ></script>



    </head>
<body>
<div th:class="form-group">
  <label class="col-md-3 control-label">Tags: </label>
  <input class="form-control" id="tags" name="tags" />
</div>

Answer 1

更改包含顺序，更新对jQuery文件的引用：

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" ></script>

添加source：

$("#tags").autocomplete({
  source: availableTags
});

<强>段

$(document).ready(function() {
  var availableTags = [
    "FirstOption",
    "SecondOption",
    "ThirdOption"
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});

@import url("//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css");

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" ></script>

<div th:class="form-group">
  <label class="col-md-3 control-label">Tags: </label>
  <input class="form-control" id="tags" name="tags" />
</div>

JQuery中的自动完成不显示提示

1 个答案: