Jquery自动完成功能适用于Jsfiddle,但不适用于页面

时间:2013-12-26 11:40:23

标签: javascript jquery asp.net-mvc

我没什么问题。我不能强制jquery自动完成工作。当我把代码放在jsfiddle上时一切正常。但是从我的Visual Studio 2013开始时却没有。

以下是我的代码:

<input id="seed_one" type="text" name="seed_one" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<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>

您可以在jsfiddle上看到它:http://jsfiddle.net/8w6fF/

任何人都可以解释我的错误吗?

我得到了2个错误:

未捕获的ReferenceError:未定义jQuery 未捕获的TypeError对象[对象对象]没有方法自动完成。

5 个答案:

答案 0 :(得分:1)

你不能使用像这样的链接

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

你必须下载jquery并将其保存在项目的一个文件夹中,然后将其链接到你的页面。!!您使用的选项仅适用于使用互联网.. !!

和你的样式表...... !!

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

答案 1 :(得分:1)

正如Sajad指出你应该下载jquery和css并保存在一个文件夹中,但只要你使用互联网就可以了。

您的代码的主要问题是您使用的是旧版本的jquery-ui。

使用 - http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js

所以你最终的代码看起来像

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

答案 2 :(得分:1)

我尝试了本地浏览器上的代码 -

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

我非常确定你不包括“jquery-ui.js”这就是你无法观察到相同结果的原因。

包含“jquery-ui.js”来源,我100%确定您的网页有效:)

答案 3 :(得分:1)

在jsfiddle中,您使用的是jQuery UI版本1.9.2,但在您的本地,您的版本是1.8.9。尝试使用最新版本。希望这会奏效。

答案 4 :(得分:0)

好的,我找到了解决方案。 VS MVC5添加了自己的包含Jquery的行,并使用以下代码覆盖我的include:

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

可以在/ shared / _layout

中找到

这就是为什么我的代码在使用jsfiddle时无效。