Question

有人可以告诉我为什么我的jquery自动完成代码无效吗？

这是我的javascript代码。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks", "Philadelphia Sixers", "New York Knicks", "Indiana Pacers", "Charlotte Bobcats", "Milwaukee Bucks", "Detroit Pistons", "New Jersey Nets", "Toronto Raptors", "Washington Wizards", "Cleveland Cavaliers"];
        $("#seed_one").autocomplete({ source: data });
    });
</script>

这是我的HTML：

<input id="seed_one" type="text" name="seed_one"/><br /> <br />

谢谢，

兰斯

Answer 1

警告：这是一个可追溯到2011年的旧问题的旧答案。你应该是建议使用更新版本的jQuery并查看API参考以获取指导。

您遇到的问题是您使用的是jQuery Autocomplete plugin，但您按照jQuery UI autocomplete的方式调用它。

如果你使用jQuery UI Autocomplete，代码本身就可以正常工作see in this fiddle。如果您使用自动完成插件，则必须将呼叫更改为

$("#seed_one").autocomplete(data);

建议：

在jQuery UI中使用自动完成功能而不是自动完成插件。后者已被弃用。
修复http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js，目前无法访问

完整的jQuery UI代码

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks", "Philadelphia Sixers", "New York Knicks", "Indiana Pacers", "Charlotte Bobcats", "Milwaukee Bucks", "Detroit Pistons", "New Jersey Nets", "Toronto Raptors", "Washington Wizards", "Cleveland Cavaliers"];
            $("#seed_one").autocomplete({source:data});
        });
    </script>
</head>

<body>
    <input id="seed_one" type="text" name="seed_one"/>
</body>
</html>

自动填充插件的完整代码：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks", "Philadelphia Sixers", "New York Knicks", "Indiana Pacers", "Charlotte Bobcats", "Milwaukee Bucks", "Detroit Pistons", "New Jersey Nets", "Toronto Raptors", "Washington Wizards", "Cleveland Cavaliers"];
            $("#seed_one").autocomplete(data);
        });
    </script>
</head>

<body>
    <input id="seed_one" type="text" name="seed_one"/>
</body>
</html>

Answer 2

尝试更改

$("#seed_one").autocomplete({ source: data });

到

$("#seed_one").autocomplete(data);

Answer 3

对于Mvc架构，您必须删除已嵌入的

@Scripts.Render("~/bundles/Jquery") and
@Scripts.Render("~/bundles/Jqueryval")

最后的所有.cshtml文件以及最后的views/Shared/_layout.cshtml文件，并将我们的jquery合适的文件放在头文件中适当的.cshtmls文件中......让我们享受。戴上头......这些文件

<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" /> 
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>

jquery自动完成无法正常工作

3 个答案: