Jquery自动完成功能不是一个功能

我想实现JQuery的自动完成功能到网站上的输入字段。检查员给我一个错误，说：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>

来源

2015-10-09 Christian

在上面的代码看起来不像你正在关闭ready函数。

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

来源

2015-10-09 17:48:24 AtheistP3ace

对不起，我错过它复制到我的职务。在我的实际代码中，它已被正确关闭。你有什么其他的建议？ – Christian

是的，我会检查旁边，以确保jqueryui完全加载，然后再尝试使用它。 – AtheistP3ace

您尚未定义任何带有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>

来源

2015-10-09 17:51:56

看起来它可能是一个竞争条件，这意味着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>

来源

2015-10-09 17:52:01 Mishap

该代码似乎可行，但您需要初始化您的学校数组。参见下面的运行示例。

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

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(); 
 
    } 
 
    }); 
 
});

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

来源

2015-10-09 17:54:27 ochi

Jquery自动完成功能不是一个功能

回答

相关问题