Question

我正在尝试将JQuery的自动完成功能实现到网站的输入字段中。检查员给我一个错误说：

“Uncaught TypeError：$（...）。autocomplete不是一个函数”。

我认为问题可能与我的脚本标签的顺序有关，但到目前为止我所尝试的一切都没有用。这是我的内容：

<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
    <script type="text/javascript">
    var schools = new Array();
        $(document).ready(function () {

            $("#school").autocomplete ({
                minLength: 2,
                source: schools,
                select: function (e, ui) {
                    e.target.value = ui.item.label;
                    $("#schoolValue").val(ui.item.value);
                    e.preventDefault();
                }
            });
    </script>
  </body>

Answer 1

您尚未使用school id定义任何元素。检查下面的工作代码，与您自己的代码进行比较。

var schools = ['abc', 'xyz'];
$(document).ready(function() {

  $("#school").autocomplete({
    minLength: 2,
    source: schools,
    select: function(e, ui) {
      e.target.value = ui.item.label;
      $("#schoolValue").val(ui.item.value);
      e.preventDefault();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title></title>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>
  <label for="school">Tags:</label>
  <input id="school">
</body>

Answer 2

在上面的代码中，您似乎没有正确关闭就绪功能。

<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
    <script type="text/javascript">
    var schools = new Array();
        $(document).ready(function () {

            $("#school").autocomplete ({
                minLength: 2,
                source: schools,
                select: function (e, ui) {
                    e.target.value = ui.item.label;
                    $("#schoolValue").val(ui.item.value);
                    e.preventDefault();
                }
            });
        });
    </script>
  </body>

Answer 3

代码似乎有效，但您需要初始化您的学校阵列。请参阅下面的运行示例。

另外请记住，您需要输入至少两个字母才能显示下拉列表。

＆＃13;

var schools = ['aaaaa', 'bbbbb', 'cccccc', 'ddddd'];

$(document).ready(function() {

  $("#school").autocomplete({
    minLength: 2,
    source: schools,
    select: function(e, ui) {
      e.target.value = ui.item.label;
      $("#schoolValue").val(ui.item.value);
      e.preventDefault();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Search school
<input id="school" type="text">
<br/><br/>School selected
<input type="text" id="schoolValue" />

＆＃13;

Answer 4

看起来它可能是竞争条件，这意味着jquery脚本在您开始尝试使用它时尚未完成加载。你准备好了文档，这很好，但只检查DOM是否准备就绪，而不是加载异步加载的脚本。

这里和其他地方有一些答案：How to make script execution wait until jquery is loaded

但简而言之，您可以defer执行方法，直到window.jQuery返回true，尝试$( window ).load或者您可以使用require.js这样的方法为您执行此操作。您还应该修改脚本标记：

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

Jquery自动完成不是一个函数

4 个答案: