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

Autocomplete in JQuery does not show hints

本文关键字：显示 提示 JQuery      更新时间：2023-09-26

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

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

第2版：脚本链接中出现问题。代替

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

更改包含顺序，更新对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>

相关文章：